Download Leinwand als Bild aus einer anderen Domäne, in Javascript

Question

Ich möchte eine Leinwand als Bild (JPEG) herunterladen, die Leinwand besteht aus zwei Bildern aus zwei Domänen. Ich habe diesen Code:

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"; 
}); 

Und die HTML-Datei:

<canvas id="canvas"> 

</canvas> 

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

Aber es funktioniert nicht ... Wenn ich die beiden drawImage es arbeiten zu entfernen.

Answer 1

Zum einen, dass die Fehler beheben:

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

Um das:

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

Socondly. Sie sollten dieses Skript mit einem Webserver ausführen (prüfen Sie Xampp, Wamp, etc). Aus Sicherheitsgründen können Sie dieses Skript nicht verwenden.

Endlich. Ich schätze, dass Sie das Ergebnis nur dann speichern können, wenn die Domain, die diese Bilder hostet, die domänenübergreifende Freigabe verwendet.