使用 Blob 将使用 Google 字体的 SVG 转换为 Canvas [重复]答案

【问题标题】：Converting SVG that uses Google Fonts to Canvas using Blob [duplicate]使用 Blob 将使用 Google 字体的 SVG 转换为 Canvas [重复]
【发布时间】：2018-08-05 15:37:42
【问题描述】：

我在使用 Google 字体的页面上显示了 SVG。

SVG 上的<text> 节点很好地继承了 Google 字体。

现在，我正在尝试使用 Blob 转换 SVG。

这可行，但<text> 是使用后备“Verdana”呈现的，后者安装在浏览器机器上，而不是“Pacifico”，它是一种动态加载的 Google 字体。

window.onload = function() {
  var width = 400;
  var height = 100;

  var DOMURL = self.URL || self.webkitURL || self;
  var data = new XMLSerializer().serializeToString(document.getElementById("test"));

  var svg = new Blob([data], { type: "image/svg+xml" });
  var url = DOMURL.createObjectURL(svg);

  var canvas = document.getElementById("result");
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext("2d");

  var img = new Image(width, height);
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
  }
  img.src = url;
}

@import url('https://fonts.googleapis.com/css?family=Pacifico');
body {
  font-family: Pacifico, Verdana;
  font-size: 15px;
}
body * {
  font-family: Pacifico, Verdana;
}

#test, #result {
  border: 1px solid #eee;
}

h4 {
  margin: 2em 0 1em 0;
}

<h4>Source SVG</h4>
<svg id="test" width="400px" height="100px" style="font-family: 'Pacifico', 'Verdana'; font-size: 15px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g xmlns="http://www.w3.org/2000/svg">
    <rect fill="#67b7dc" transform="translate(-0.5,-0.5)" width="80" height="100" />
    <rect fill="#6794dc" transform="translate(80,0)" transform="translate(-0.5,-0.5)" width="80" height="100" />
    <rect fill="#6771dc" transform="translate(160,0)" transform="translate(-0.5,-0.5)" width="80" height="100" />
    <rect fill="#8067dc" transform="translate(240,0)" transform="translate(-0.5,-0.5)" width="80" height="100" />
    <rect fill="#a367dc" transform="translate(320,0)" transform="translate(-0.5,-0.5)" width="80" height="100" />
    <text fill="#fff" transform="translate(20,20)" font-size="25" dy="20">
      Some text using font</tspan>
    </text>
  </g>
</svg>
  
<h4>Result canvas</h4>
<canvas id="result" />

到目前为止，我还没有找到让画布文本使用自定义字体的方法，希望能提供任何帮助。

附：作为记录，我知道诸如fabric和canvg之类的第3方库的存在。他们能够在不丢失自定义字体的情况下将 SVG 转换为 Canvas。但是，我试图避免使用任何 3rd 方库，以保持轻松。

附言将 Google 字体的 @import 包含到 SVG 的 <defs><style> 部分也无济于事，即使我们明确定义了 @font-face。坦率地说，这不是一个选择，因为我还不知道该库将使用什么字体。

P.P.P.S 延迟导出无济于事，因此也可能不是时间问题。

【问题讨论】：

这看起来很有希望，但只解决了部分问题。我不知道特定的字体或其 URL，或者即使它是 Google 字体。仍然会感谢有关如何实施该解决方案的解决方案。

标签： javascript svg canvas

【解决方案1】：

您可能将所有精力都集中在画布上，但问题已经从您的图像开始......

这是您的代码，但只是一个非常小的示例

<style>
  @import url('https://fonts.googleapis.com/css?family=Pacifico');
  body * { margin: 0; }
</style>

<h4>Source</h4>
<svg id="test" width="300px" height="30px" style="font-family: 'Pacifico', 'Verdana'; font-size: 15px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g xmlns="http://www.w3.org/2000/svg">
    <rect fill="#67b7dc" transform="translate(-0.5,-0.5)" width="300" height="50" />
    <text fill="#fff"  font-size="25" dy="20"> <tspan>Some text using font</tspan> </text>
  </g>
</svg>

<h4>Image</h4>
<img id="image" />

<script>
  window.onload = function() {
    var DOMURL = self.URL || self.webkitURL || self;
    var data = new XMLSerializer().serializeToString(document.getElementById("test"));

    var svg = new Blob([data], { type: "image/svg+xml" });
    var url = DOMURL.createObjectURL(svg);

    var img = document.getElementById("image");
    img.src = url;
  }
</script>

关于 SVG 字体的这个问题有很多争论，这里有一篇很好的文章开始：

https://github.com/JChemPaint/jchempaint/wiki/The-svg-font-problem-and-its-solution

【讨论】：