在JS中将图像转换为ArrayBuffer

Question

您需要获取一个jpg并将其转换为arrayBuffer，有人知道如何做吗？ 我尝试使用下面的函数但对于Microsoft API没有成功

 document.querySelector('#inputImage').addEventListener('change', function() {

    var reader = new FileReader();
    reader.onload = function() {

      var arrayBuffer = this.result,
      array = new Uint8Array(arrayBuffer);


    };

- Adilmar Coelho Dantas

Answer 1

您可以使用此功能将您的Base64图像转换为Array Buffer。

export async function base64ToFile(dataURL, fileName) {
    const arr = dataURL.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    return (fetch(dataURL)
        .then(function (result) {
            return result.arrayBuffer();
        }));
}

- Harish Soni

---

使用fetch从base64字符串获取响应！太聪明了！谢谢！我要借鉴你的技巧。 - Mouradif

Answer 2

document.querySelector('#inputImage').addEventListener('change', function() {

    var reader = new FileReader();
    reader.onload = function() {

      var arrayBuffer = new Uint8Array(reader.result);
        console.log(arrayBuffer);
      };
     reader.readAsArrayBuffer(this.files[0]);  
 });

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

- DavidB

---

来自评论：在 Stack Overflow 上，仅包含代码的答案是不被鼓励的，因为它们没有解释它如何解决问题。请编辑您的答案，解释这段代码的作用以及它如何回答问题，这样对于提问者以及其他遇到类似问题的用户都会有帮助。参见：如何撰写好的答案？。谢谢。 - sɐunıɔןɐqɐp

Answer 3

对于现代浏览器，只需使用继承自Blob对象的File对象的arrayBuffer方法即可：（英文链接1）（英文链接2）（英文链接3）（英文链接4）。

const ab = await input.files[0].arrayBuffer();

const input = document.createElement("input");
input.type = "file";
document.body.append(input);
input.addEventListener("change", async event => {
    const ab = await input.files[0].arrayBuffer();
    const ui8a = new Uint8Array(ab);
    console.log("Uint8Array", ui8a);
});

- KeyKi

Answer 4

看起来你的代码中 this 是另外一种东西。要么使用 bind() ：

reader.onload = function() { .... }.bind(this);

或者使用一个胖箭头语法：

reader.onload = () => { .... };

---

因为this.result如果result是输入属性/属性，则我会说这不是指输入元素。

- Jai

---

返回错误 ReferenceError：arrayBuffer 未定义。 - Adilmar Coelho Dantas