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

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

您可以使用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); 
} 

Answer 3

我不认为有内置在制定这个。但是，您应该能够将每个像素通道值减少到更有限的一组值。例如：

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)