Question

Possible Duplicate:
Drawing an image from a data URL to a canvas

This is the JavaScript Code…

var imageObj = new Image();
var context = this.canvas.getContext("2d"); 
imageObj.onload = function() {
     context.drawImage(imageObj, 69, 50);
};
imageObj.src = "blackhat.jpg"

The above code is setting the Image object source to the location of the image file in the base directory of the server.
My Question is :-

How do i set the Image Object source to base64 encoded string or DataURI string?

Example : datauri string =

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADs.....................

If i set the encoded string as it is:-

imageObj.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADs....................."

It doesn’t work.

Answer 1

Consider using the Blob constructor instead. That way, it is easier to load your image over AJAX, and you don’t need to have it inline, which might be the problem here (maybe it’s too big?). And you don’t need to base64 encode anything.