当前位置：文江博客话题详情

更改 Html5 Canvas 元素的颜色深度

发布于 2024-12-11 18:35:05 字数 87 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

棒棒糖 2024-12-18 18:35:05

是的，这是可以做到的，而且并不是太难。在这里查看我的答案：如何使用渐变贴图为 HTML5 画布和画布中的图像调色。

就像着色一样，您所要做的就是检查每个像素并更改RGB 值较小（步骤 8 或 16，而不是步骤 1）

因此，对于 8 个步骤，您可以执行以下操作：

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

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

示例：

http://jsfiddle.net/gbBz7/

Yes it can be done, and isn't too difficult. See my answer here: How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

Just like in tinting, simply all you must do is go over each pixel and change the RGB values to be lesser (steps of 8 or 16 instead of steps of 1)

So for 8 steps you could do:

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

Which ought to work, but you should check the edge cases.

Example:

http://jsfiddle.net/gbBz7/

回复收藏 0 原文

缺⑴份安定 2024-12-18 18:35:05

您可以使用 getImageData 迭代每种颜色的每个字节，因此您可以对其应用一些数学函数来表示 8 位颜色：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);
}

You can iterate through each byte of each color with getImageData, so you could apply some math functions to it to e.g. represent 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);
}

回复收藏 0 原文

闻呓 2024-12-18 18:35:05

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

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)

I don't think there is built in setting for this. But you should be able to reduce each pixel channel value to a more limited set of values. Something like:

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)

回复收藏 0 原文

~没有更多了~