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

【问题标题】：Change Color Depth of Html5 Canvas Element更改 Html5 画布元素的颜色深度
【发布时间】：2011-12-15 06:50:05
【问题描述】：

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

【问题讨论】：

这不只是依赖于用户的屏幕设置吗？
我其实是想对图像数据做一个“low-rez”的效果。

标签： html canvas colors html5-canvas

【解决方案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/

【讨论】：

太棒了；这非常有帮助。快速提问；画布默认为 32 色位深度，对；所以你在这个例子中将它减少到 32/4 = 8 位深度？还是我想错了？再次感谢！

【解决方案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);
}

【讨论】：

好的；这就是我的想法。我有点希望那里有一些预定义的功能，比如“改变颜色深度”……我猜那是一厢情愿，嗯？
@user201926：抱歉错过了一些东西……设置为黑白。编辑：我希望这应该会更好。
这个答案是最好的解决方案，但是最后一行有一个错误。颜色应限制为整数。 return Math.ceil(Math.floor(c / (255 / 16)) * (255 / 16));

【解决方案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)

【讨论】：

@pimvdb：很抱歉发布了这样一个类似的答案。直到我发布后，我才收到有新答案的通知！
别担心！事实上，你的更干净。
它不起作用！ @pimvdb 的答案是正确的。