字体图标在 blob 图像中不起作用

Question

这是关于使用 canvas 和 Blob 创建图像。

我在其中包含字体图标，如下所示。输出显示为方块而不是图标。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<text x="0" y="70" font-family="FontAwesome" font-size="70px">\uf040</text>' +
  '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {
  type: 'image/svg+xml;charset=utf-8'
});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

<!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <meta charset="utf-8">
</head>

<body>

  <H3>SVG:</H3> 
  <svg width="100" height="100">
    <text x="0" y="70" font-family="FontAwesome" font-size="70px">&#xf040</text>
  </svg>

  <H3>Blob:</H3> 
  <canvas id="canvas"></canvas>
</body>

</html>

我是不是漏掉了什么？谁能帮我解决这个问题？

Answer 1

I am including font-icon in it as shown below

实际上你没有包含它，你是指向它。
不幸的是，出于安全原因，HTMLImages 内容必须是独立的，不能调用任何外部资源。

这意味着您必须在创建 blob 之前真正将其包含在您的 svg 中。

为此，要么直接在您的 svg 文档中复制 font-awesome 的 svg 版本（只有您使用的字形需要存在），要么将 font-awesome 的字体文件之一转换为 dataURI 版本，（可通过 xhr+FileReader 实现）并将此 dataURI 设置为字体的 url。

就我个人而言，我会选择前者，因为后者会产生更大的文件大小。

字体图标在 blob 图像中不起作用

Font Icon not working in blob image

svg

html5-canvas

font-awesome