我在用dom-to-image.js插入。问题是,它会生成一个<foreignObject>
污染画布的标签。这是生成 svg 的部分。
function makeSvgDataUri(node, width, height) {
return Promise.resolve(node)
.then(function (node) {
node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
return new XMLSerializer().serializeToString(node);
})
.then(util.escapeXhtml)
.then(function (xhtml) {
return '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
})
.then(function (xhtml) {
return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
xhtml + '</svg>';
})
.then(function (svg) {
return 'data:image/svg+xml;charset=utf-8,' + svg;
});
}
如果我只是注释掉<foreignObject>
标签部分,则图像不显示。生成此 svg 的正确方法是什么?<foreignObject>
这是 safari 自版本 9 以来引入的已知安全问题。
由于绘制foreignObject 意味着要使用XMLParser,因此该领域的恶意代码风险非常大。 Safari 可能知道他们这里缺少一些东西,并且更喜欢污染画布。
这同样适用于所有 svg 图像边缘下方的 IE。
由于这是一个安全问题,因此没有解决方法,除非使用其他不执行此类黑客操作的库。即使在支持它的浏览器上,该技术也应用了如此多的安全限制,因此它不会有任何好处。
在画布上绘制 html 的唯一可靠方法是仅使用画布方法来执行此操作。
像 html2canvas 或其他库这样的库会执行此操作,并且不会污染您的画布。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)