Can't convert base64Image to ImageData object

Question

I'm currently trying to convert a base64Encoded string (representation of an image) into an ImageData object in Javascript. However, this comes back with an error:

Uncaught InvalidStateError: Failed to construct 'ImageData': The input data length is not a multiple of 4.

The encoded image is 940 x 740

What am I missing? Any help appreciated

JSFiddle link with full code

   function _base64ToArrayBuffer(base64) {
        var binary_string = window.atob(base64);
        var len = binary_string.length;
        var bytes = new Uint8Array(len);
        for (var i = 0; i < len; i++) {
            bytes[i] = binary_string.charCodeAt(i);
        }
        return bytes.buffer;
    }


const base64String = ""; //truncated because stackoverflow question too long.
const arrBuffer = _base64ToArrayBuffer (base64String );

var array = new Uint8ClampedArray(arrBuffer);
console.log(array);
var image = new ImageData(array, 900, 740);
console.log(image);

You are passing png binary data to `ImageData` that is not the type of data it expects. It is expecting an array containing RGBA (red,green,blue,alpha) values, eg `[255,0,0,1, 0,255,0,1]` which would represent a red pixel and a green pixel. — Patrick Evans, Jul 23 '21 at 08:20
@PatrickEvans I see. So the determining of what those potential values would be isn't really possibly without using canvas methods I assume? Goal here is to determine pixel colour values from base64 string. — Squiggs., Jul 23 '21 at 08:25
You could determine them without the canvas, but that would require you to create the code to parse the png file format, or use an existing js library that does it. But that is way more overhead then just using the few lines it would take when using the canvas — Patrick Evans, Jul 23 '21 at 09:01

score 0 · Answer 1 · answered Jul 23 '21 at 09:05

You can get the ImageData from a Canvas

function _base64ToImageData(buffer, width, height) {
    return new Promise(resolve => {
    var image = new Image();
    image.addEventListener('load', function (e) {
      var canvasElement = document.createElement('canvas');
      canvasElement.width = width;
      canvasElement.height = height;
      var context = canvasElement.getContext('2d');
      context.drawImage(e.target, 0, 0, width, height);
      resolve(context.getImageData(0, 0, width, height));
    });
    image.src = 'data:image/png;base64,' + buffer;
    document.body.appendChild(image);
    setTimeout(() => {
      document.body.removeChild(image);
    }, 1);
  });
}

window.addEventListener('load', () => {
  _base64ToImageData(base64String, 2056, 1236).then(data => {
    console.log(data);
  });
});

Can't convert base64Image to ImageData object

1 Answers1