有序抖动到256色

Question

我试图在HTML5画布中ordered dither图像向下或每次接近256种颜色。我有抖动算法，你可以在test page上看到（检查浏览器控制台的颜色计数）。

但是我无法理解如何为不同的图像选择或生成最佳深度和阈值贴图，结果会根据原始图像的颜色大小而有很大差异。

到目前为止，我有2x2,3x3,4x4,8x8地图的其中一个功能，

    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;
};