使用getImageData()时,html5画布总是返回8位颜色

Question

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

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

Answer 1

Canvas将始终返回24位数据+ 8位alpha通道(RGBA).每个组件值当然将具有8位或256个值.这是按规格.它永远不会返回8位索引图像数据,因此,如果您以某种方式遇到8位(索引)图像数据,那么您可能正在读取错误的数据或来自对象/数组.

从规格:

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 at浏览器加载时间,这不是画布自己做的事情).

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

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开始,依此类推.

如果由于某种原因需要将调色板缩小到索引调色板,则必须为此自己提供算法.从简单到坏到更复杂和准确的有很多.但这不是你能用画布开箱即用的东西.一些指针中可以找到这个答案,或者您可以使用库像这样,这将创建一个从画布(动画)GIF.

还要注意,如果绘制到画布中的图像不满足跨源要求(CORS),画布将被"污染"(安全方面)并且getImageData()将返回一个值设置为0的数组.