从 <canvas> 获取 byte[]

Question

我有一个 html 画布，如下所示：

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

这样我就可以将图像读入画布，然后获取图像数据。但这真正给了我什么？我需要byte[]画布中的一个，其中包含图像数据，所以我真的想将字符串转换base64为byte[]. 我走在正确的道路上吗，或者……？

Answer 1

调用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。