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': Tainted canvases may not be export.

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 に答える