javascript - Image to ArrayBuffer in Js - Stack Overflow

admin管理员组

文章数量:1339781

You need to get a jpg and convert to arrayBuffer, does anyone have any idea how to do this? I tried doing using a function below but without success for a Microsoft API

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

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

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


    };

You need to get a jpg and convert to arrayBuffer, does anyone have any idea how to do this? I tried doing using a function below but without success for a Microsoft API

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

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

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


    };

• javascript
• jquery
• html
• api

Share Improve this question Follow asked Dec 17, 2018 at 14:18 Adilmar Coelho DantasAdilmar Coelho Dantas 7311 gold badge22 silver badges1111 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You can use this function to convert your base64 Image to an 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();
        }));
}

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">

For the modern browsers just use the arrayBuffer method of the File object which is inherited from the Blob object:

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);
});

Looks to me that this is something else in your code. Either use bind() :

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

or use a fat arrow syntax:

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

---

Because this.result if result is the property/attribute of input then i would say that this does not refers to the input element.

本文标签： javascriptImage to ArrayBuffer in JsStack Overflow