Ошибка при преобразовании изображения в Base64

Question

Я привязываю, чтобы написать код для преобразования Image в Base64 для хранения изображения в localStorage для использования в автономном режиме. Но каждый раз, когда я получаю ответ, как «данные:». Изображение 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/