javascript - 如何将 png 文件转换为 Uint8Array？

Question

我使用来自 html 代码的输入从 deckstop 获取图像。然后我希望将照片传递给一个 javascript 函数以转换为 Uint8Array。我该怎么做？

我只通过以下方式实现了收购

         <input type="file" name="myimage">

Answer 1

您可以ArrayBuffer使用File API的FileReader对象及其readAsArrayBuffer方法读取文件，然后使用它ArrayBuffer来创建Uint8Array. 大致：

const fr = new FileReader();
fr.onload = () => {
    // It worked
    const array = new Uint8Array(fr.result);
    // ...use the array here...
};
fr.onerror = () => {
    // The read failed, handle/report it
};
fr.readAsArrayBuffer(yourInputElement.files[0]);

这是一个快速而肮脏的示例：如果您选择一个文件，这将通过查看 PNG 标头的数据来告诉您它是 PNG 文件还是其他类型的文件：

const PNG_HEADER = Uint8Array.of(0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A);
document.getElementById("yourInput").addEventListener("change", function() {
    const fr = new FileReader();
    const file = this.files[0];
    let {name} = file;
    const x = name.lastIndexOf("\\");
    if (x !== -1) {
        name = name.substring(x + 1);
    }
    fr.onload = () => {
        // It worked
        const array = new Uint8Array(fr.result);
        if (array.length >= PNG_HEADER.length &&
            PNG_HEADER.every((byte, index) => byte === array[index])) {
            console.log(`${name} is a PNG`);
        } else {
            console.log(`${name} is not a PNG`);
        }
    };
    fr.onerror = () => {
        // The read failed, handle/report it
    };
    fr.readAsArrayBuffer(file);
});

<input type="file" id="yourInput">