將映像轉換爲Base64時出錯

Question

我正在編寫代碼以將映像轉換爲Base64，以將映像存儲在localStorage中以供離線使用。但是每次我收到像「data：」這樣的回覆。圖像src很好，因爲變量div會顯示圖像。有人可以幫我解決這個錯誤嗎？

代碼：

var div = $('<img />').appendTo('body'); 
div.attr('src', "src/1.png"); 
div.attr('class', 'test'); 

var img = new Image; 
img.src = "src/1.png"; 

var lol = getBase64Image(img); 
console.log(lol); 

功能：

function getBase64Image(img) { 

var canvas = document.createElement("canvas"); 
canvas.width = img.width; 
canvas.height = img.height; 

var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0); 

var dataURL = canvas.toDataURL("image/png"); 
console.log("lol "+dataURL); 

return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

Answer 1

最大的可能是你試圖訪問尚未加載的圖像。對我很好了以下工作：

var img = new Image(); 
img.onload = function() { 
    // when image is loaded... 
    console.log(getBase64Image(img)); 
}; 

img.src = '/image/in/current/domain.jpg'; 

DEMO：http://jsfiddle.net/ZRPs9/1/