Html5キャンバス要素の色の深度を変更

Question

HTML5キャンバス要素の画像の色深度を変更する方法があるかどうかは、画像の各ピクセルの色が最も近いより少ない色のビット深度では等価である。ありがとうございました。

Answer 1

はい、実行できますが、それほど難しくありません。ここに私の答えを参照してください：How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

だけ着色のように、単にあなたがしなければならないすべては、各ピクセルの上に行くと低いことをRGBの値を変更している（1の8つのまたは16の代わりに、ステップの手順）

ので、あなたができる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)