将 svg 保存为 png，其中 svg 包含具有外部参考的图像答案

【问题标题】：Save svg as png where svg contains images with external reference将 svg 保存为 png，其中 svg 包含具有外部参考的图像
【发布时间】：2016-02-18 05:17:17
【问题描述】：

我有一个 SVG，其中包含许多引用外部图像源的图像标签（比如来自 amazon s3 存储桶）。我正在尝试将其转换为这样的 png

canvg(document.getElementById('myCanvas'), svg);
 var imgData = document.getElementById('myCanvas').toDataURL("image/png");

我收到此错误未捕获的安全错误：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

我已更改我的 s3 存储桶设置 (As mentioned here)。在canvg函数之后添加了这段代码

var img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');
    img.src = document.getElementById('myCanvas').value;

甚至尝试遍历所有图像标签并设置 crossOrigin 属性

我仍然遇到同样的错误。

【问题讨论】：

stackoverflow.com/questions/29975138/…的可能重复
终于找到了解决办法。我现在正在服务器端进行转换（使用 apache batik 转码器库）没有更多的安全错误；）

标签： jquery cross-domain canvg

【解决方案1】：

我发现在服务器端进行转换会更好，因为在 amazon s3 中允许跨源是一种安全威胁，而且许多浏览器不支持 .toDataUrl 即使提供了跨源权限。

这就是我进行转换的方式

在客户端

var s = new XMLSerializer().serializeToString(document.getElementById("svg"))
var encodedData = window.btoa(s);

并且这个编码数据被传递到服务器端，在那里我使用蜡染库将 svg 实际转换为 png

BASE64Decoder decoder = new BASE64Decoder();
    byte[] image = decoder.decodeBuffer(encodedData);
    String fileLocation  = "C:\temp";
    String fileName = "New-" + System.currentTimeMillis();
    File file = new File(fileLocation +File.separator+ fileName + ".svg");
    FileOutputStream fop = new FileOutputStream(file);
    if (!file.exists()) {
      file.createNewFile();
    }
    fop.write(image);
    fop.flush();
    fop.close();
    PNGTranscoder transcoder = new PNGTranscoder();
    TranscoderInput tinput = new TranscoderInput(new FileInputStream(fileLocation + File.separator + fileName +".svg"));
    OutputStream ostream = new FileOutputStream(fileLocation + File.separator + fileName +".png");
    TranscoderOutput toutput = new TranscoderOutput(ostream);
    try {
          transcoder.transcode(tinput, toutput);
    } catch (TranscoderException e) { 
          System.out.println("error*");
           e.printStackTrace();
    }
    ostream.close();

【讨论】：