將svg保存爲png，其中svg包含帶有外部參考的圖像

我有一個帶有許多指向外部圖像源的圖像標記的SVG（來自亞馬遜s3存儲桶）。我試圖把它轉換成PNG這樣將svg保存爲png，其中svg包含帶有外部參考的圖像

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

我收到此錯誤未捕獲的SecurityError：無法執行對「HTMLCanvasElement」 toDataURL「：被污染的畫布不得出口。

我改變了我的s3存儲桶設置（As mentioned here）。添加這段代碼canvg功能後

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

偶試過遍歷所有的圖像標籤，並設置crossOrigin屬性

我仍得到相同的錯誤。

來源

2016-02-18 Jerry

可能的重複http://stackoverflow.com/questions/29975138/how-can-i-get-pngbase64-with-images-inside-of-svg-in-google-charts – guest271314

最後我得到了一個解決方案。我現在在服務器端進行轉換（使用apache batik轉碼器庫）沒有更多的安全錯誤;） – Jerry

我發現最好在服務器端進行轉換，因爲允許在亞馬遜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();

來源

2016-04-27 13:28:04 Jerry

將svg保存爲png，其中svg包含帶有外部參考的圖像

回答

相關問題