So as the title says, i’m trying to load a base64 encoded png image into a p5js image, here’s a simplification of how im doing it:
PS: I’m using a base64 image because it’s generated from a server
var img;
function setup() {
// Canvas setup code ....
img = loadImage('loading.png'); // show an image which says that it's loading
img.loadPixels();
// More setup code ...
}
// ...
function draw() {
image(img, 0, 0, img.width, img.height);
// ... more code
}
// ...
function receivedCallback(data) { // This function gets called once we receive the data
// Data looks like this: { width: 100, height: 100, data: "...base64 data...." }
img.resize(data.width, data.height);
var imgData = data.data;
var imgBlob = new Blob([imgData], { type: "image/png" }); // Create a blob
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(imgBlob); // Craft the url
img.src = imageUrl;
img.loadPixels();
img.updatePixels();
}
But, it’s not working which is why I am asking here.
If there is any way to do it I would appreciate it very much.
Thanks in advance.