Question

我想知道是否有办法改变HTML5 Canvas元素中图像的颜色深度，因为图像中每个像素的颜色将以较小的颜色位深度“舍入”到最接近的等效颜色，例如。谢谢。

Answer 1

是的，可以做到，而且不太难。请在此处查看我的回答：How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

就像在着色中一样，只需要做的就是遍历每个像素并将RGB值更改为更小（步长为8或16而不是1的步骤）

所以你可以做8个步骤：

redValue = redValue - (redValue % 32) // 155 would become 128, etc

哪个应该有效，但你应该检查边缘情况。

示例：

http://jsfiddle.net/gbBz7/

Answer 2

我认为没有内置设置。但是您应该能够将每个像素通道值减少到更有限的值集。类似的东西：

var ctx, width, height;
var factor = 8;
var pixels = ctx.getImageData(0, 0, width, height).data;

function reduce(val) {
    return Math.round(val/factor)*factor;
}

for(var i = 0, l = pixels.length; i < l; i+=4) {
    pixels[i] = reduce(pixels[i]);
    pixels[i+1] = reduce(pixels[i+1]);
    pixels[i+2] = reduce(pixels[i+2]);
}

ctx.putImageData(pixels, 0, 0)

Answer 3

您可以使用getImageData遍历每种颜色的每个字节，因此您可以将一些数学函数应用于其中，例如代表8-bit colors：http://jsfiddle.net/pimvdb/eGjak/191/。

var imgdata = ctx.getImageData(0, 0, 400, 400); // get data
var data = imgdata.data; // bytes

// 8-bit: rrr ggg bb
for(var i = 0; i < data.length; i += 4) {
    data[i]     = nearest(data[i],     8); // set value to nearest of 8 possibilities
    data[i + 1] = nearest(data[i + 1], 8);
    data[i + 2] = nearest(data[i + 2], 4);
}

ctx.putImageData(imgdata, 0, 0); // put image data to canvas

function nearest(x, a) { // will round down to nearest of a possibilities
                         // in the range 0 <= x <= 255
    return Math.floor(x / (255 / a)) * (255 / a);
}

更改Html5画布元素的颜色深度

3 个答案: