将带有图像标签的 Svg 转换为 PNG答案

【问题标题】：Convert Svg with image tag into PNG将带有图像标签的 Svg 转换为 PNG
【发布时间】：2014-04-17 16:31:45
【问题描述】：

我想将 SVG 数据转换为 PNG。为此，我正在使用画布和 drawimage() 函数。这可以 100% 正常工作并将我的 svg 转换为 png，但如果我的 svg 有任何图像标签，那么它将无法工作。

看看我的虚拟代码：-

<html>
    <body>
        <div id="mainsvg">
            <svg  xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
            <rect x='0' y='0' width='50' height='100' fill='red'></rect>
            <image x='50' y='0' width='100' height='100' xlink:href='http://www.rashflash.com/assets/images/homepage/bubble2.png'/>
            </svg>
        </div>
        <p>
            <canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
            <script>
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                var mainsvg=document.getElementById('mainsvg');
                var data =mainsvg.innerHTML;
                var DOMURL = self.URL || self.webkitURL || self;
                var img = new Image();
                var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
                var url = DOMURL.createObjectURL(svg);
                img.onload = function() {
                    ctx.drawImage(img, 0, 0);
                    DOMURL.revokeObjectURL(url);
                };
                img.src = url;
            </script>
    </body>
</html>

仅当我的 svg 如下时，以上代码才会生成图像：-

<div id="mainsvg">
     <svg  xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
         <rect x='0' y='0' width='50' height='100' fill='red'></rect>            
     </svg>
</div>

为什么不转换 svg 的 imagetag ？需要帮助谢谢

Fiddle

【问题讨论】：

标签： javascript html canvas svg drawimage

【解决方案1】：

遗憾的是，您将无法在此组合中使用外部资源 -

这是this link 关于安全性的声明：

...SVG 图像的实现非常严格。 SVG 图像不允许加载任何外部资源，例如，即使是似乎来自同一个域。栅格等资源图像（例如 JPEG 图像）或必须作为数据内联： URI。

由于图像引用外部源，因此在绘制到画布时会出现安全限制。

在this link 进一步说明（显然同样适用于 Chrome 等）：

限制

出于安全考虑，Gecko 对 SVG 内容设置了一些限制当它被用作图像时：
- JavaScript is disabled.
- External resources (e.g. images, stylesheets) cannot be loaded,
though they can be used if inlined through BlobBuilder object URLs or
data: URIs.
- :visited-link styles aren't rendered.
- Platform-native widget styling (based on OS theme) is disabled.
请注意，上述限制特定于图像上下文；他们直接查看 SVG 内容或嵌入内容时不适用通过、<object> 或 <embed> 元素作为文档。</embed></object>

这意味着您需要将图像作为带有 data-uri 的 Blob 对象集提供。我假设然后忽略 SVG 中的图像标签（或先提取它）变得更容易，然后简单地引用图像 url 并将其单独绘制到画布上（当然，如果图像是，这将无法顺利工作在堆栈的中间）。

【讨论】：

【解决方案2】：

首先下载一个js库svg_todataurl.js并包含它

然后粘贴这段代码

var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");

【讨论】：