load base64 image with fabric.Image.fromURL

Question

I am working with fabric.js inside of backbone.js, and trying to figure out how to load a Base64 image using fabric's command:

fabric.Image.fromURL( 'url', function(img)....

It works fine when I plug in a static url, like:

fabric.Image.fromURL('http://www.domain.com/image.jpg', function(img) {
    img.set({ left: ui.offset.left, top: ui.offset.top});
    canvas.add(img);       
});

but I cannot get a Base64 image to load successfully. How I am I supposed to solve this problem?

Answer 1

Try: data:image/jpeg;base64,"+url. If this doesn't work then maybe your base64 is broken or you might need to tweak the base64 to unit8 conversion technique provided here and add the image data to the image object placed inside the canvas.

Data URI

Answer 2

All of the above answers are correct. But without an example, the answers aren't obvious.

fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgo....', function(img) {
    img.set({ left: ui.offset.left, top: ui.offset.top});
    canvas.add(img);       
});