javascript - 256色へのディザリング

Question

HTML5キャンバスのディザ画像を毎回256色またはそれに近い色に注文しようとしています。テスト ページで確認できるように、ディザ アルゴリズムが動作しています(ブラウザ コンソールでカラー カウントを確認してください)。

しかし、さまざまな画像に最適な深度としきい値のマップを選択または生成する方法を理解するのに苦労しています。結果は、元の画像の色数によって大きく異なります。

これまでのところ、2x2、3x3、4x4、8x8 マップ用のこれらの関数の 1 つがあります。

    function ditherImageData4x4(imageDataToDither){
    var depth = $('#depth').val();
    var threshold_map = [
        [  1,  9,  3, 11 ],
        [ 13,  5, 15,  7 ],
        [  4, 12,  2, 10 ],
        [ 16,  8, 14,  6 ]
    ];
    var dataWidth  = imageDataToDither.width;
    var dataHeight = imageDataToDither.height;
    var pixel  = imageDataToDither.data;
    var x, y, a, b;
    for ( x=0; x<dataWidth; x++ ){
        for ( y=0; y<dataHeight; y++ ){
            a    = ( x * dataHeight + y ) * 4;
            b    = threshold_map[ x%4 ][ y%4 ];
            pixel[ a + 0 ] = ( (pixel[ a + 0 ]+ b) / depth | 0 ) * depth;
            pixel[ a + 1 ] = ( (pixel[ a + 1 ]+ b) / depth | 0 ) * depth;
            pixel[ a + 2 ] = ( (pixel[ a + 2 ]+ b) / depth | 0 ) * depth;
            //pixel[ a + 3 ] = ( (pixel[ a + 3 ]+ b) / depth | 3 ) * depth;
        }
    }
    return pixel;
};