Question

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

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

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

我在其中包含font-icon，如下所示

实际上你并不包括它，你指的是它遗憾的是，出于安全原因，HTMLImages内容必须是自我依赖的，并且无法调用任何外部资源。

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

要这样做，要么直接在svg文档中复制svg版本的font-awesome（只使用你需要的字形）或者将font-awesome的一个字体文件转换为dataURI版本，（可实现）使用xhr + FileReader）并将此dataURI设置为您的字体的URL。

Personnaly，我会选择前者，因为后者会产生更大的文件大小。

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

1 个答案: