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？需要帮助谢谢

Fiddle

Answer 1

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

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

...... SVG图像的实现非常严格。 SVG图像不允许加载任何外部资源，例如，甚至是外部资源看起来来自同一个域。资源如栅格必须将图像（例如JPEG图像）或＆lt; iframe＆gt;作为数据内联：的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内容或嵌入SVG内容时不适用通过＆lt; iframe＆gt;，＆lt; object＆gt;或＆lt; embed＆gt;作为文档元件。

这意味着您需要将图像作为使用data-uri设置的Blob对象。我认为然后更容易忽略SVG中的图像标签（或首先提取它），然后简单地引用图像URL并将其单独绘制到画布上（如果图像是这样的话，这将无法顺利进行）在堆栈中间。）

Answer 2

首先下载一个js库svg_todataurl.js并将其包含在内

然后只需粘贴此代码

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

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

2 个答案: