Question

我正在向画布渲染一个svg（以后再保存为png）。

    var svg = document.getElementById("mysvg");
    var svgData = new XMLSerializer().serializeToString( svg );  
    var canvas = <any>document.getElementById("canvas");
    var ctx = canvas.getContext( "2d" );

    var img = document.createElement( "img" );
    img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );

    img.onload = function() {
        ctx.drawImage( img, 0, 0 );
        console.log( canvas.toDataURL( "image/png" ) );
    };

它适用于base64编码图像：

<image   x="10" y="10"  xlink:href="data:image/jpeg;base64, ...

但是当使用url作为xlink：href值时，它不会将图像渲染到画布：

<image   x="10" y="10"  xlink:href="assets/myimage.png" />

Answer 1

（编辑：）原来是设计（这里是Gecko的一些细节，但似乎其他引擎做出了同样的选择，即使规范只禁止脚本 - https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image）

（原始答案：）您可能遇到受污染画布的问题。

浏览器具有非常强的封装数据的策略，因此除非CORS标头明确允许，否则任何来源（即来自一个域的文档）都不能访问来自其他来源的任何类型的数据。他们可以向其他域发出请求，但他们永远无法回读结果。这是一个非常强大的规则，它是我们所知道的所有网络安全的基础。

一个有趣的结果是，如果画布（或类似画布的实体，如视频）包含来自另一个域（协议/端口）的图片，则会将其标记为“受污染”且无法回读。这种“污点”的状态从画布到画布都是如此，所以如果你将一块被污染的画布复制成纯画布，那么纯粹的画布也会受到污染。

如果文档是从与svg图片相同的协议/域/端口提供的，那么您尝试做的事情应该有效。

用图像渲染svg到画布

1 个答案: