从< canvas>获取byte [] [英] Get byte[] from <canvas>

问题描述

我有一个html画布，像这样：

I have an html canvas, like so:

//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 string into a byte [] 。我在正确的轨道上，或....？

So I can read the image into the canvas, and then get the Image Data. But what does that really give me? I need a byte[] from the canvas, which contains the image data, so really I want to convert a base64 string into a byte[]. Am I on the right track, or....?

推荐答案

调用 getImageData 返回 ImageData 对象。

文档：

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

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

ImageData 对象的 data 属性是长度为4 * width * height的字节数组。

The data property of an ImageData object is is a byte array of length 4*width*height.

像素每次从左上到右下排列一行，每个像素由4个字节，红色，绿色蓝色和alpha表示。

The pixels are ordered top left to bottom right a row at a time, with each pixel be represented by 4 bytes, red, green blue and alpha.

这篇关于从< canvas>获取byte []的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！