圖像的URL到畫布和保存

Question

我想從URL加載圖像到畫布，然後顯示要保存的圖像。我可以在畫布上顯示圖像，但是當我嘗試將圖像顯示爲base64字符串時，它將顯示爲空白。這是我現在可以提出的，只需要最後一部分的幫助。

var canvas = document.getElementById('myCanvas'), 
    context = canvas.getContext('2d'), 
    imageObj = new Image(); 

imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0); 
}; 

imageObj.src = 'http://3.bp.blogspot.com/-4NP3xwj-ZMI/UXU8RT1k02I/AAAAAAAACEU/88knXDu2MeQ/s72-c/music3g1.JPG'; 

var dataURL = canvas.toDataURL(); 
document.getElementById('canvasImg').src = dataURL; 

Answer 1

好的，有幾件事情要知道。

1. 當你從一個源繪製圖像的畫布域之外的HTML是，它標誌了dirty標誌在畫布上。這使得它不能使用.toDataURL()函數。這主要是一個安全問題。

2. var dataURL = canvas.toDataURL(); document.getElementById('canvasImg').src = dataURL;在圖像實際繪製到畫布之前被調用。您需要獲取數據url並在映像的onload函數中設置src。