How to convert base64 to RGBA8888

Question

I'm trying to convert and image to base 64 and then to RGBA8888 to feed camera buffer, I'm stuck when trying to convert from base64 to rgba.

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}

<input type="file" onchange="encodeImageFileAsURL(this)" />

Answer 1

Canvas - I use canvas because it has ways to get at the underlying data, and ways to render any kind of image format onto itself.

Html image tag - not sure if this was necessary, but it provides an easy way to draw an image file onto a canvas.

I take the file from your reader code, insert it into an img, render that img onto a canvas, and then extract the raw RGBA frame from the canvas. You can find out about the data format here (data property). I hope that is a suitable format for your application.

const canvas = document.createElement("canvas");
const ctx = canvas.getContext('2d');

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    const img = document.createElement("img");
    img.onload = () => {
      const w = img.naturalWidth, h = img.naturalHeight;
      ctx.drawImage(img, 0, 0);
      const imgData = ctx.getImageData(0, 0, w, h);
      const arr = Uint8ClampedArray.from(imgData.data);
      // do something with arr
      console.log(`image width: ${w}, image height: ${h}, expected raw data size (w x h x 4): ${w * h * 4}, actual size: ${arr.length}`);
    };
    img.src = reader.result;
  };
  reader.readAsDataURL(file);
}

<input type="file" onchange="encodeImageFileAsURL(this)" />