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

Convert Svg with image tag into PNG

本文关键字：Svg 转换 PNG 标签 图像      更新时间：2023-09-26

我想将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 的图像标签？ 需要帮助谢谢

小提琴

遗憾的是，

您将无法在此组合中使用外部资源 -

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

。SVG 图像的实现非常严格。SVG 图像 不允许加载任何外部资源，例如，即使是外部资源 似乎来自同一域。资源，如栅格 图像(例如 JPEG 图像(或

当图像引用外部源时，绘制到画布时会出现安全限制。

此外，在此链接中说明(显然同样适用于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 内容时不适用 通过

这意味着需要将图像作为具有数据 uri 的 Blob 对象集提供。我认为忽略 SVG 中的图像标签(或先提取它(变得更加容易，然后简单地引用图像 url 并将其单独绘制到画布上(当然，如果图像在堆栈中间，这将不顺利工作(。

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

然后只需粘贴此代码

var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");
相关文章：