1

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.

Community
  • 1
  • 1
Taha
  • 301
  • 1
  • 3
  • 11
  • 3
    Can you clarify "doesn't work"? Which browsers have you tested against? – Tieson T. Sep 30 '12 at 20:16
  • 1
    The `img.src = 'data:image/jpeg;base64,...'` method most certainly works http://codepen.io/thebabydino/pen/BoEuH Maybe you should check the DataURI string. Among the mistakes I've done in the past are copy-pasting it with weird characters at the end, selecting and copy-pasting just part of it or writing variable names all wrong. – Ana Sep 30 '12 at 21:32
  • I have tested against Firefox Browser Version 14.01 – Taha Oct 04 '12 at 19:00

1 Answers1

0

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.

Janus Troelsen
  • 20,267
  • 14
  • 135
  • 196