html5 - 使用getImageData()时html5 canvas总是返回8bits的颜色

我使用HTML5画布来渲染和图像，对图像进行一些基本的编辑，而不是尝试使用getImageData（0函数来读取像素并完成一些工作）。我注意到了，不管源图像的深度是多少位（8位，16位，24位），getImageData（）方法允许返回8位（256色）。这是不可取的。我希望getImageData（0方法）能够输出尽可能多的颜色。
我已经阅读了文档，画布应该能够处理任何你在它上面抛出的位深度（形象地说），但是我看不到任何地方可以将位深度设置得更高。

最佳答案

canvas将始终返回24位数据+8位alpha通道（rgba）。当然，每个分量值都有8位或256个值。这是符合规格的。但它永远不会返回8位索引图像数据，因此，如果以某种方式遇到8位（索引）图像数据，则可能是从错误的对象/数组读取数据。
从specification开始：
图像数据。数据

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

从这个对象中，我们获得像素的数据视图，默认为aUint8ClampedArray视图：

var pixelData = imageData.data;

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

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的数组。