选择多个图像并将它们存储在数据数组中 (FIGMA)

Question

我正在为 FIGMA 构建一个插件，用户可以在其中选择多个图像，然后我将这些图像保存在一个数组中，然后将其发送以供解释。

我的代码有 2 个问题

img.src = 垃圾箱；不会触发 img.onload，但如果我设置 img.src = "literal string"，onload 方法会起作用。
最后发送的 imageData 数组是未定义的，我认为是因为我对异步函数的理解不好。

如果你能帮助解决这个问题，我将不胜感激。谢谢 P.S。这是纯粹的 javascript，您无需了解 FIGMA 即可遵循代码。

<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,
            }
        }, '*');

Answer 1

一位朋友最终帮助了我。谢谢 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;
}

选择多个图像并将它们存储在数据数组中 (FIGMA)

Selecting Multiple Images and storing them in a data array (FIGMA)

javascript

filereader

figma