0

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

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

我收到此错误Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': 受污染的画布可能无法导出。

我已经更改了我的 s3 存储桶设置（如此处所述）。在canvg函数之后添加了这段代码

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

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

我仍然遇到同样的错误。

4

1 回答 1

2

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

这就是我进行转换的方式

在客户端

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

并且这个编码数据被传递到服务器端，在那里我使用 batik 库将 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();
于 2016-04-27T13:28:04.803 回答