How to load an image in base64 with processing.js?

thirit

How to load an image in base64 with processing.js?

in Processing with Other Languages • 1 year ago

How can I load an image into the sketch using the loadImage() function with an image URI, such as:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

I've tried by doing this:

               
                PImage im;
                void setup(){
                 String uri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
                 im = loadImage(uri);
                 noLoop();
                }
                void draw(){
                 image(im,0,0);
                }
               
               
                without being successful...

It would be great if someone could provide me with a small example

Thanks!

Replies(4)

jbum

Re: How to load an image in base64 with processing.js?

1 year ago

I'm reasonably sure that won't work, I don't think loadImage supports decoding data urls.

If you are working with a limited set of these, I would suggest capturing the images to local files and using those. The particular image in your example can also be drawn using the ellipse function.

EDIT: I was wrong - see below.

thirit

Re: How to load an image in base64 with processing.js?

1 year ago

I got it to work with the help of Pomax.

So the thing is that the image has to load before being drawn, so the noLoop() is not helpful.

Here is the piece of code that works:

String uri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
PImage im;
void setup() {
im = loadImage(uri);
}
void draw() {
background(0);
image(im,10,10);
}