Сохраните svg as png, где svg содержит изображения с внешней ссылкой

Question

У меня есть SVG со многими изображениями, ссылающимися на внешние источники изображения (скажем, из amazon s3 bucket). Я пытаюсь преобразовать его в PNG, как этот

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

я получаю эту ошибку Uncaught SecurityError: Не удалось выполнить «toDataURL» на «HTMLCanvasElement»: Tainted холсты не может быть экспортирован.

Я изменил настройки s3 bucket (As mentioned here). Добавлен этот кусок кода после функции canvg

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

Даже пытался перебирает все теги изображения и установить crossOrigin атрибут

Тем не менее я получаю ту же ошибку.

Answer 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();