如何使用html2canvas.js將帶有@ font-face的SVG文本元素轉換為畫布？

Question

我正在嘗試使用html2canvas.js （ https://html2canvas.hertzen.com/ ）用JavaScript截屏。 但是，當頁面包含SVG文本元素時，我遇到了問題。

正如您在下面的屏幕截圖中所看到的，text元素是重復的（並且只有一個副本保留了正確的字體系列）。

原始身體

畫布復制

這是我的代碼

的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屬性正在加倍-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> 

鏈接

在此處輸入圖片說明

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