无法将 base64Image 转换为 ImageData 对象

问题描述

我目前正在尝试在 JavaScript 中将 base64Encoded 字符串（图像表示）转换为 ImageData 对象。但是，这会返回一个错误：

未捕获的 InvalidStateError: 无法构造 'ImageData': 输入数据长度不是 4 的倍数。

编码图像为 940 x 740

我错过了什么？任何帮助表示赞赏

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

解决方法

您可以从 Canvas 获取 ImageData

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,height);
      resolve(context.getImageData(0,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);
  });
});