JavaScript画像をdrawImageで作成した後に保存

Question

作成した画像を自動的にダウンロードしようとしています。私はこれまでのところ、これを持っている：

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var img1 = loadImage('https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main); 
 

 
var img2 = loadImage('http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main); 
 
var imagesLoaded = 0; 
 
function main() { 
 
    imagesLoaded += 1; 
 

 
    if(imagesLoaded == 2) { 
 
     // composite now 
 
     ctx.drawImage(img1, 0, 0); 
 
     
 
     ctx.globalAlpha = 0.5; 
 
     ctx.drawImage(img2, 0, 0); 
 
     
 
     document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
 
    } 
 
} 
 

 
function loadImage(src, onload) { 
 
    // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called 
 
    var img = new Image(); 
 
    
 
    img.onload = onload; 
 
    img.src = src; 
 

 
    return img; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas width="512" height="512" id="canvas"></canvas>

画像が処理され、正しく作成されますが、ダウンロードがトリガされないと、次のエラーメッセージが表示されている：

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported 

私は読んだことがありますCORS enabled imageのMDNの文書で、crossOriginを匿名に設定しようとしましたが、それでも動作しません。

ダウンロードをトリガーするのに適した方法はありますか？

Answer 1

srcを設定する前に、画像crossOriginのプロパティを設定する必要があります。

Access-Control-Allow-Originレスポンスヘッダーを設定するリソースがあるサーバーにアクセスできないため、プロキシが必要になります。

私はこの回答にhttps://cors.ioを使用していますが、どちらを使用してもかまいません。

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var img1 = loadImage('https://cors.io/?https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main); 
 

 

 
var img2 = loadImage('https://cors.io/?http://introcs.cs.princeton.edu/java/31datatype/peppers.jpg', main); 
 
var imagesLoaded = 0; 
 

 
function main() { 
 
    imagesLoaded += 1; 
 

 
    if (imagesLoaded == 2) { 
 
    // composite now 
 
    ctx.drawImage(img1, 0, 0); 
 

 
    ctx.globalAlpha = 0.5; 
 
    ctx.drawImage(img2, 0, 0); 
 

 
    document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
 
    } 
 
} 
 

 
function loadImage(src, onload) { 
 
    // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called 
 
    var img = new Image(); 
 

 
    img.onload = onload; 
 
    img.crossOrigin = 'anonymous'; 
 
    img.src = src; 
 

 
    return img; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas width="512" height="512" id="canvas"></canvas>