下載畫布作爲來自不同領域的圖像，在javascript中

我想下載一個畫布作爲圖像（jpeg），畫布由來自兩個域的兩幅圖像組成。我有這樣的代碼：下載畫布作爲來自不同領域的圖像，在javascript中

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>

但它不工作...如果我刪除這兩個drawImage它的工作。

來源

2017-04-03 Romain Guillot

歡迎來到Stack Overflow Romain Guillot！你有沒有[檢查你的控制檯？]（http://stackoverflow.com/documentation/javascript/185/getting-started-with-javascript/714/using-console-log）它可能會提供解決問題的有用線索。 –

[Canvas by cross-origin data]可能的重複]（http://stackoverflow.com/questions/13674835/canvas-tainted-by-cross-origin-data） – powerc9000

首先修復的bug：

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

要的是：

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

Socondly。您應該使用Web服務器運行該腳本（檢查Xampp，Wamp等）。出於某些安全原因，如果沒有它，您將無法使用該腳本。

最後。我想只有託管這些圖片的域使用跨域共享時，您才能保存結果。

來源

2017-04-03 15:10:02 5ka

下載畫布作爲來自不同領域的圖像，在javascript中

回答

相關問題