Convert an Image to byte array in Angular (typescript)

Question

I have a requirement where I need to convert the selected image (a part of a form group) to a byte array which needs to be sent as a part of a post request to the backend.

HTML Component:

<div class="form-group">
                <label>Image</label>
                <input type="file" accept="image/*" class="form-control" formControlName="productImage" onchange="displaySelectedImageFunc(this);">
                <img *ngIf="displaySelectedImage" src="{{selectedImageUrl}}">
                <span class="error-message" *ngIf="itemRegistrationForm.controls.productImage.dirty && itemRegistrationForm.controls.productImage.errors">Select Image of the product</span>
</div>

Can you try this one? stackoverflow.com/questions/53390580/… — Bhavin
– Bhavin, Commented Feb 3, 2021 at 9:16
@Bhavin Hi, I need to do the opposite which is to convert the image to byte array — Ani
– Ani, Commented Feb 3, 2021 at 9:24
They have used "btoa", you can try passing your base 64 string to "atob" ref: stackoverflow.com/questions/28185781/… — Bhavin
– Bhavin, Commented Feb 3, 2021 at 9:30
i found a npm package which can be useful npmjs.com/package/image-to-base64. Conversion from base64 to byte array should be easier stackoverflow.com/questions/42360999/… — Dawid .T
– Dawid .T, Commented Feb 3, 2021 at 9:30

Msk Satheesh · Accepted Answer · 2021-02-03 12:42:18Z

Try Using

function convertDataURIToBinary(dataURI) {
  var base64Index = dataURI.indexOf(';base64,') + ';base64,'.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }
  return array;
}

function upload() {
  const file = document.querySelector('input[type=file]').files[0];
  
  const preview = document.getElementById('preview'); 
  const reader = new FileReader();
  let byteArray;

  reader.addEventListener("loadend", function () {
    // convert image file to base64 string
    console.log('base64', reader.result);
    preview.src = reader.result;
    byteArray = convertDataURIToBinary(reader.result);
    console.log('byte array', byteArray);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

<input type="file" id="file" accept="image/*" width="300" height="300" />

<submit onClick="upload()">Upload</submit>

<img id="preview"></img>

daniel rubambura · Accepted Answer · 2021-08-06 10:22:07Z

1

Since you can convert the image to base64 string using reader.readAsDataUR(file) you can extract the byte part with e.target.result.split('base64,')[1] on the reader.onload event like this

const file = document.querySelector('input[type=file]').files[0])
const reader = new FileReader();
reader.onload = (e: any) => {
  const bytes = e.target.result.split('base64,')[1];
};
reader.readAsDataURL(file);

answered Aug 6, 2021 at 10:22

daniel rubambura

5757 silver badges14 bronze badges

Collectives™ on Stack Overflow

Convert an Image to byte array in Angular (typescript)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related