Estoy creando un complemento para FIGMA, donde el usuario selecciona varias imágenes, que luego guardo en una matriz, que envío para que se interpreten.
Tengo 2 problemas con mi código
Agradecería su ayuda para resolver esto. Gracias PD: esto es javascript puro y no necesitas saber FIGMA para seguir el código.
<input type="file" id="images" accept="image/png" multiple /> <button id="button">Create image</button> <script> const button = document.getElementById('button'); button.onclick = () => { const files = document.getElementById('images').files; function readFile(index) { console.log(1); if (index >= files.length) {return}; console.log(2); const file = files[index]; const imageCaption = file.name; var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (e) { console.log(4); // get file content const bin = e.target.result; const imageBytes = new Uint8Array(bin); //Get Image width and height var img = new Image(); img.src = bin; img.onload = function () { console.log(6); const width = img.width; const height = img.height; console.log("imageCaption: " + imageCaption); console.log("width: " + width); console.log("height: " + height); console.log("imageBytes: " + imageBytes); var data = {imageBytes, imageCaption, width, height}; //Read Next File nextData = readFile(index + 1); if( nextData ) { data.concat(nextData) } return data; } } } //Call function to Read and Send Images const imageData = readFile(0); //Send Data parent.postMessage({ pluginMessage: { type: 'send-image', imageData, } }, '*');Un amigo terminó ayudándome con eso. ¡Gracias Hiba!
const button = document.getElementById('button'); const input = document.getElementById('input'); button.addEventListener('click', async () => { const files = input.files ? [...input.files] : []; const data = await Promise.all( files.map(async (file) => await getImageData(file)) ); console.log(data); }); async function getImageData(file) { // get binary data from file const bin = await file.arrayBuffer(); // translate bin data into bytes const imageBytes = new Uint8Array(bin) // create data blob from bytes const blob = new Blob([imageBytes], { type: "image/png" }); // create html image element and assign blob as src const img = new Image(); img.src = URL.createObjectURL(blob); // get width and height from rendered image await img.decode(); const { width, height } = img; const data = { image: blob, caption: file.name, width, height }; return data; }