如何使用html2canvas.js将带有@ font-face的SVG文本元素转换为画布? [英] How to convert SVG text element with @font-face to canvas using html2canvas.js?

问题描述

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

I'm trying to use html2canvas.js (https://html2canvas.hertzen.com/) to take screenshots with JavaScript. However, I have a problem when the page contains SVG text elements.

如下面的屏幕截图所示，文本元素是重复的(并且只有一个副本保留了正确的字体系列).

As you can see on the screenshots below, the text element is duplicated (and only one of the copies keep the right font family).

原始正文

画布副本

这是我的代码

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文本属性加倍-HTML2CANVAS .
但是，NodeParser.prototype.getChildren上的补丁对我不起作用:其余文本元素的字体家族错误.

Note
I've been looking for a similar issue, and I've found this one: SVG Text attribute is doubling - HTML2CANVAS.
However, the patch on NodeParser.prototype.getChildren didn't work for me: the remaining text element had the wrong font family.

非常感谢！

推荐答案

注释

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

note

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

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

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

在此处输入图片描述

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

这篇关于如何使用html2canvas.js将带有@ font-face的SVG文本元素转换为画布?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！