在客户端将 svg 转换为 png

Convert Svg to Png on Client Side

本文关键字：png 转换 svg 客户端      更新时间：2023-09-26

我正在开发一个基于 Web 的应用程序，用户可以在其中使用 Svg 创建设计。 我想在客户端将 SVG 设计转换为 PNG 图像文件。 我找到了使用 Canvas 的解决方案，这在 Firefox 中效果很好，但在 Chrome 中会产生安全错误。

检查下面的代码，谢谢：-

 var mainsvg=document.getElementById('svgforImg');                           
 var canvas=document.getElementById('canvas');                       
 var ctx = canvas.getContext("2d");
                        var data=mainsvg.innerHTML;
                        var DOMURL = self.URL || self.webkitURL || self;
                        var svg = new Blob([data], {
                                type: "image/svg+xml;charset=utf-8"
                        });
                        var url = DOMURL.createObjectURL(svg);
                        var img = new Image();
 img.onload = function() {
                               ctx.drawImage(img, 0, 0);
                                DOMURL.revokeObjectURL(url);                                  
                                var imageurl = canvas.toDataURL("image/png");
}

现在我的变量 imageurl 包含"base64 png"图像。 这在火狐中有效。但在镀铬线 

var imageurl = canvas.toDataURL("image/png");

生成安全错误。

任何帮助将不胜感激。

我认为这与这个问题有关。SVG 源自哪个服务器？如果它与应用程序的来源不同(记住：子域很重要！(，您可以在原始服务器中添加所需的 http-header。

相关文章：