javascript - 从<canvas>获取字节[]

我有一个HTML Canvas ，如下所示:

//output is a base64string of image data
var oldImage = new Image();
oldImage.onload = function () {
  var resizeRatio = oldImage.width / 500;
  var height = oldImage.height / 2;
};
oldImage.src = output;
var standardizedCanvas = document.createElement("canvas");
standardizedCanvas.setAttribute("width", "500px");
standardizedCanvas.setAttribute("height", height + "px");
standardizedCanvas.getContext("2d").drawImage(oldImage, 0, 0, frontCanvas.width, frontCanvas.height);

这样我就可以将图像读取到 Canvas 中，然后获取图像数据。但是那真的给我什么呢？我需要 Canvas 中的byte[]，其中包含图像数据，因此我真的想将base64字符串转换为byte[]。我是在正确的轨道上，还是....？

最佳答案

调用getImageData将返回ImageData对象。

说明文件:

https://developer.mozilla.org/en-US/docs/Web/API/ImageData

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
data对象的ImageData属性是一个字节数组，长度为4 *宽*高。

像素一次从左到右依次排列，每个像素由4个字节表示，分别是红色，绿色，蓝色和alpha。