将图像转换为Base64时出错

Question

I am tying to write code to convert Image to Base64 for storing image in localStorage for offline usage. But every time I get response like "data:,". Image src is good because variable div will show image. Can someone help me to resolve this error?

Code:

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:

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

Most probably you try to access the image which is not yet loaded. The following works for me well:

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/