Question

我使用html代码的输入从广告牌中获取图像。然后，我希望将照片传递给javascript函数，以将其转换为Uint8Array。我该怎么办？

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

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

Answer 1

您可以使用ArrayBuffer的FileReader对象及其File API以readAsArrayBuffer method的形式读取文件，然后使用该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">

如何将png文件转换为Uint8Array？

1 个答案: