0

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

小提琴

4

2 回答 2

1

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

这是此链接中关于安全性的说明：

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

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

在此链接中进一步说明（显然同样适用于 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 内容或通过 <iframe>、<object> 或 <embed> 元素作为文档嵌入时。

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

于 2013-10-04T07:05:03.960 回答
1

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

然后只需粘贴此代码

var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");
于 2014-04-17T07:55:04.757 回答