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?

works fine for me sending a `base64` like this: `data:image/png;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kz....`. I'm using `custom fabric build` generated from here http://fabricjs.com/build/. But i'm searching another option because i need make that works in offline mode and apparently `fabric.Image.fromURL` works only in online mode. — jose920405, Dec 06 '17 at 15:55

score 4 · Answer 1 · answered Aug 01 '21 at 21:00

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);       
});

score 2 · Answer 2 · edited May 23 '17 at 10:09

2

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

edited May 23 '17 at 10:09

Community

1
1

answered Jul 12 '12 at 19:14

Bleeding Fingers

6,993
7
46
74

score 1 · Answer 3 · answered Mar 15 '18 at 13:41

Make sure your data url is according to the following format:

data:[< mediatype >][;base64],< data >

MDN

<data> above should be a valid base64 string.

If you want to test whether it's fabric that's not rendering the url or url isn't correct, try to open the whole data url in browser, browser will render the image if it's a correct data url.

fabric should just work fine for a base64 data url as it works for http image address.

load base64 image with fabric.Image.fromURL

3 Answers3