Question

我使用html5画布进行渲染和渲染，对图像进行一些基本的编辑，而不是尝试使用getImageData（0函数来读取像素并做一些工作。我注意到了，无论深度是多少源图像是（8位，16位，24位）getImageData（）方法允许返回8位（256色）。这是不可取的。我想getImageData（0方法吐出尽可能多的颜色）收到。

我已经阅读了文档并且画布应该能够处理你抛出的任何深度（比喻）但我无法看到任何地方设置更深的位深度

Answer 1

Canvas将始终返回 24位数据+ 8位Alpha通道（RGBA）。每个组件值当然将具有8位或256个值。这是按规格。它永远不会返回8位索引图像数据，但是如果你以某种方式遇到8位（索引）图像数据，那么你可能会错误地读取数据或者从对象/数组中读取数据。

来自specification：

imagedata。数据

Returns the one-dimensional array containing the data in RGBA order,
as integers in the range 0 to 255.

只是为了覆盖相反的方面：如果您使用2 - 256种颜色绘制8位索引调色板图像（如PNG-8或GIF），则其索引调色板将始终转换为RGBA缓冲区（实际上已转换）浏览器在加载时加载到RGBA，所以这不是画布自己做的事情。

要从画布读取数据，您有两个级别（或三个用于更高级的用途），图像数据对象包含各种信息，包括对实际像素数组视图的引用：

var imageData = context.getImageData(x, y, w, h);

在此对象中，我们获取了像素的数据视图，默认情况下为Uint8ClampedArray视图：

var pixelData = imageData.data;

对于更高级的用法，我们可以从中获取原始字节缓冲区（如果需要提供其他视图，即Uint32Array）可以从以下位置获取：

var rawBytes = pixelData.buffer;
var buffer32 = new Uint32Array(rawBytes);

但是我们坚持使用默认的8位钳位视图 - 要从中读取，您需要知道像素总是打包到RGBA中或作为32位值。所以我们可以通过以下方式获得单个像素：

var r = pixelData[0];
var g = pixelData[1];
var b = pixelData[2];
var a = pixelData[3];

下一个像素将从索引4开始，依此类推。

如果由于某种原因需要将调色板缩小到索引调色板，则必须为此自己提供算法。从简单到坏到更复杂和准确的有很多。但这不是你能用画布开箱即用的东西。可以在this answer中找到一些指针，或者您可以使用库such as this，它将从画布创建（动画）GIF。

另外请注意，如果绘制到画布中的图像不符合跨源要求（CORS），画布将被“污染”（安全方面），getImageData()将返回一个数组值设置为0。

Answer 2

ImageData（由getImageData返回）属性data为您提供一个数组，其中每个条目都是红色，绿色，蓝色和alpha序列的颜色通道，而不是实际颜色。 e.g。

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
colour = '#' + (red<16)?'0':'' + red.toString(16) +
(green<16)?'0':'' + green.toString(16) +
(blue<16)?'0':'' + blue.toString(16);

使用getImageData（）时，html5画布总是返回8位颜色

2 个答案: