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

Question

我想将SVG数据转换为PNG。 为此，我使用canvas和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？ 需要帮助谢谢

小提琴

Answer 1

遗憾的是，您将无法同时使用外部资源-

以下是有关安全性的链接：

... SVG图像的实施非常严格。 SVG映像不允许加载任何外部资源，例如，即使看起来似乎来自同一域的资源也是如此。 必须将诸如光栅图像（例如JPEG图像）或<iframe>之类的资源作为数据内联：URI。

由于图像引用的是外部来源，因此在绘制到画布时会增加安全限制。

此外，在此链接中进行了说明（显然适用于Chrome等）：

限制条件

为了安全起见，Gecko在用作图像时，对SVG内容设置了一些限制：
 - JavaScript is disabled. - External resources (eg 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内容或通过<iframe>，<object>或<embed>元素将其作为文档嵌入时，它们不适用。

这意味着您需要将图像提供为带有data-uri的Blob对象集。 我认为，这样就可以轻松地忽略SVG中的image标签（或先提取它），然后再简单地引用image url并将其分别绘制到画布上（如果这样做，如果image为在堆栈中间）。

Answer 2

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

然后粘贴此代码

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

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

问题描述

2 个解决方案

解决方案1
1

解决方案2
1 2014-04-17 07:55:04

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

问题描述

2 个解决方案

解决方案1 1

解决方案2 1 2014-04-17 07:55:04

解决方案1
1

解决方案2
1 2014-04-17 07:55:04