如何使用 html2canvas.js 将带有 @font-face 的 SVG 文本元素转换为画布？

Question

我正在尝试使用html2canvas.js (https://html2canvas.hertzen.com/) 通过 JavaScript 截取屏幕截图。但是，当页面包含 SVG 文本元素时，我遇到了问题。

正如您在下面的屏幕截图中所见，文本元素是重复的（并且只有一个副本保留了正确的字体系列）。

原体

画布副本

这是我的代码

HTML

<svg width="600" height="200" style="background-color:lightblue;">
  <text transform="translate(100, 100)" style="font-size:60px; font-family: 'Oswald'">Hello world</text>
</svg>

<br/>
<button id="createCanvasButton">Create canvas !</button>

CSS

@import url(//fonts.googleapis.com/css?family=Oswald);

JS

$('#createCanvasButton').on('click', function() {
  html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
  });
});

jsFiddle
https://jsfiddle.net/AndreLovichi/571t86u4/

注意
我一直在寻找类似的问题，我发现了这个问题：SVG Text attribute is doubling - HTML2CANVAS。
但是，NodeParser.prototype.getChildren 上的补丁对我不起作用：剩余的文本元素的字体系列错误。

非常感谢！

Answer 1

注意

I updated on your code. Please add font base64 in svg. Maybe I answered too late ：），This is the first answer I use stackoverflow The font need change dataURI insert in SVG

JS

const request = new XMLHttpRequest();
request.open("get", './xxx/demo.woff');
request.responseType = "blob";
request.onloadend = () => { let fontDemoDataURI = reader.result }

html

    <svg>
         <style>
          @font-face {
          font-family: 'Oswald';
              src: url(data:application/font-woff;base64,d09GRgABAAAAOtXY........ED==);
          </style>
    </svg>

链接

enter image description here

https://jsfiddle.net/571t86u4/93/