キャンバスを別のドメインの画像としてダウンロードする（

Question

）キャンバスを画像（jpeg）としてダウンロードしたいのですが、キャンバスは2つのドメインから2つの画像で構成されています。

var img1 = new Image(); 
img1.src = "domain1/image.jpeg"; 

var img2 = new Image(); 
img2.src = "domain2/image.png"; 

var canvas = document.querySelector("#canvas"); 
var context = canvas.getContext("2d"); 

img1.onload = function(){ 
    // Some code to define width and height of canvas 
    context.drawImage(img1, 0, 0); 
    context.drawImage(img2, 0, 0); 
}; 

var link = document.getElementById("download"); 
link.addListener('click', function(){ 
    link.href = canvas.toDataURL("image/jpeg"); 
    link.download = "final_image.jpeg"; 
}); 

HTMLファイル：私はこのコードを持っている

<canvas id="canvas"> 

</canvas> 

<a id="download">Download</a> 

をしかし、それは動作しません...私はそれが動作2 drawImageを削除した場合。それに

link.addListener('click', function(){//your code}); 

：

link.addEventListener('click', function(){//your code}); 

Socondly

Answer 1

まずそのバグを修正。 Webサーバーを使用してそのスクリプトを実行する必要があります（Xampp、Wampなどを確認してください）。いくつかのセキュリティ上の理由から、あなたはそれなしでそのスクリプトを使用することはできません。

最後に、これらの画像をホストするドメインがドメイン間の共有を使用する場合にのみ、結果を保存できると思います。