Estoy tratando de generar una imagen usando p5.js y p5.js-svg y luego guardo el SVG xml como dataURL para el almacenamiento. Aquí hay un script de ejemplo que he simplificado para esta pregunta:
const canvasWidth = 600; const canvasHeight = 600; const bgColor = "#fffcf3"; let unencodedDataURL = ""; const sketch = (p) => { p.setup = () => { p.createCanvas(canvasWidth, canvasHeight, p.SVG); p.background(bgColor); p.noLoop(); } p.draw = () => { p.noFill(); p.ellipse(z canvasWidth / 2, canvasHeight / 2, 150, 150 ); unencodedDataURL = p.getDataURL(); console.log(`inside: ${unencodedDataURL}`); } } const test = new p5(sketch, document.body); console.log(`outside: ${unencodedDataURL}`); La primera instrucción de registro imprime la URL de datos correcta. Pero, por supuesto, la segunda declaración de registro se ejecuta antes que la que está dentro de draw() y no puedo averiguar cómo capturar la URL de datos correctamente. Estoy seguro de que me falta algo en las bibliotecas p5.js o p5.js-svg y hay una manera más fácil. Pero estoy atascado. ¿Alguien tiene una idea aquí? ¡Gracias por adelantado!
Debido a que p5js se ejecuta de forma asíncrona, puede agregar una devolución de llamada o escribir una Promesa para obtener datos después del dibujo del boceto, como este
var handleDataCallback = null; //........ p.ellipse( canvasWidth / 2, canvasHeight / 2, 150, 150 ); unencodedDataURL = p.getDataURL(); if (handleDataCallback) handleDataCallback(unencodedDataURL); //.... //for callback handleDataCallback = dataURL => { //todo something with dataURL }si quieres escribir como una función para generar una imagen
function generateImage(param, callback) { return new Promise(resolve => { //...... // do something p.ellipse( canvasWidth / 2, canvasHeight / 2, 150, 150 ); var unencodedDataURL = p.getDataURL(); if (callback) callback(unencodedDataURL); resolve(unencodedDataURL); // .... }) } //use Promise generateImage(yourParam, null).then(unencodedDataURL=>{ console.log(`outside: ${unencodedDataURL}`); }) //or callback generateImage(yourParam, unencodedDataURL=> { console.log(`outside: ${unencodedDataURL}`); });