Entonces, como dice el título, estoy tratando de cargar una imagen png codificada en base64 en una imagen p5js, aquí hay una simplificación de cómo lo estoy haciendo:
PD: estoy usando una imagen base64 porque se genera desde un servidor
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(); }Pero, no está funcionando, por eso estoy preguntando aquí. Si hay alguna forma de hacerlo te lo agradecería mucho. Gracias por adelantado.
EDITAR Steve no funcionó del todo , tuve que reemplazar img.src = 'data:image/png;base64,' + data.data con img = loadImage('data:image/png;base64,' + data.data);
Puede usar URL de datos directamente. Puede verse algo como esto:
function receivedCallback(data) { // This function gets called once we receive the data // Data looks like this: { width: 100, height: 100, data: "...base64 data...." } loadImage('data:image/png;base64,' + data.data, function (newImage) { img = newImage; }); }Si necesita usar blobs por algún motivo, puede consultar las conversiones de base64 a blob, como esta respuesta .
Steve no funcionó del todo , tuve que cargar la imagen en lugar de cambiar directamente su fuente. Entonces, en lugar de img.src = 'data:image/png;base64,' + data.data .
Necesitaba hacer img = loadImage('data:image/png;base64,' + data.data);
¡Gracias a Steve por su respuesta!
No hay diferencia entre cargar una imagen base64 y una imagen normal desde un archivo en P5.js. Simplemente reemplace la URL en su llamada loadImage con los datos de base64.
En aras de un ejemplo completo y ejecutable (tenga en cuenta que la imagen base64 es muy pequeña):
const imgData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"; let img; function preload() { img = loadImage(imgData); } function draw() { image(img, 0, 0); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>Si se supone que sus datos se cargarán en algún momento indeterminado en el futuro, por ejemplo, después de una interacción, entonces puede usar una devolución de llamada para determinar cuándo se cargó la imagen. Esto es algo específico del caso de uso, pero el patrón podría verse así:
const imgData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"; let img; function setup() { createCanvas(300, 300); } function draw() { clear(); textSize(14); text("click to load image", 10, 10); if (img) { image(img, 0, 0); } } function mousePressed() { if (!img) { loadImage(imgData, imgResult => { img = imgResult; }); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script> Si tiene algún código asíncrono allí, no hay problema. Simplemente llame a loadImage cada vez que tenga lista la cadena base64, por ejemplo:
function mousePressed() { if (!img) { fetch("your endpoint") .then(response => response.json()) .then(data => { // prepend "data:image/png;base64," if // `data.data` doesn't already have it loadImage(data.data, imgResult => { img = imgResult; }); }); } } Dicho todo esto, cargar una imagen en respuesta a un clic es un patrón algo extraño para la mayoría de las aplicaciones. Por lo general, querrá precargar todos sus activos en la función de preload para que pueda procesarlos inmediatamente cuando se le solicite. Si carga a través de una llamada de fetch en respuesta a un evento, es probable que haya una demora fea (o que necesite mostrar un mensaje temporal/imagen de marcador de posición/spinner) antes de representar la imagen, así que asegúrese de que esto no sea un problema xy .