使用 getImageData() 时，html5 Canvas 总是返回 8 位颜色

Question

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

我已经通读了文档， Canvas 应该能够处理你扔给它的任何位深度(比喻)，但我看不到任何地方可以将位深度设置得更高

Answer 1

Canvas 将始终返回24 位 数据+ 8 位alpha channel (RGBA)。每个分量值当然有 8 位或 256 个值。这是每个规范。但是，它永远不会返回 8 位索引图像数据，因此如果您以某种方式遇到 8 位(索引)图像数据，那么您可能是从对象/数组中读取了错误的数据。

来自specification :

imagedata . data

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，所以这不是 Canvas 自己做的事情)。

要从 Canvas 中读取数据，您有两个级别(或三个更高级的用途)，图像数据对象包含各种信息，包括对实际像素阵列 View 的引用:

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

我们从这个对象中获取像素的数据 View ，默认情况下是一个Uint8ClampedArray View :

var pixelData = imageData.data;

对于更高级的用法，我们可以从这里获取原始字节缓冲区(如果您需要提供其他 View ，即 Uint32Array)可以从以下位置获取:

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

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

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

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

如果您出于某种原因需要将调色板缩减为索引调色板，则您必须自己提供算法。从简单和糟糕到更复杂和准确的，有很多。但这不是你可以用 Canvas 开箱即用的东西。一些指针可以在 this answer 中找到或者你可以使用图书馆 such as this这将从 Canvas 创建一个(动画)GIF。

另请注意，如果绘制到 Canvas 中的图像不满足跨源要求 (CORS)， Canvas 将被“污染”(安全方面)并且 getImageData() 将返回一个值为 0 的数组。