0

私が今していることは、すべてのピクセルをvar getPixels = require("get-pixels")で取得してから、次のコードでピクセルの配列をループすることです:

var pixelation = 10;
var imageData = ctx.getImageData(0, 0, img.width, img.height);
var data = imageData.data;

for(var y = 0; y < sourceHeight; y += pixelation) {
    for(var x = 0; x < sourceWidth; x += pixelation) {
        var red = data[((sourceWidth * y) + x) * 4];
        var green = data[((sourceWidth * y) + x) * 4 + 1];
        var blue = data[((sourceWidth * y) + x) * 4 + 2];

        //Assign
        for(var n = 0; n < pixelation; n++) {
            for(var m = 0; m < pixelation; m++) {
                if(x + m < sourceWidth) {
                    data[((sourceWidth * (y + n)) + (x + m)) * 4] = red;
                    data[((sourceWidth * (y + n)) + (x + m)) * 4 + 1] = green;
                    data[((sourceWidth * (y + n)) + (x + m)) * 4 + 2] = blue;
                }
            }
        }

    }
}

この方法の問題点は、結果の画像がシャープすぎることです。ここに画像の説明を入力

私が探しているのは、ImageMagick -sale で行われたこれに似たものです

ここに画像の説明を入力

2番目に使用したコマンドは

convert -normalize -scale 10% -scale 1000% base.jpg base2.jpg

この方法の問題は、実際のピクセル サイズを指定する方法がわからないことです。

forそのループで2番目の結果を取得することは可能ですか。または、 imagemagick -scale を使用することをお勧めしますが、数学に役立つ人がいる場合は、実際のピクセルサイズを大きくすることができます。

4

2 に答える 2

2

どのような計算に苦労しているのかわかりませんが、次のような 600x600 の画像から始めると:

ここに画像の説明を入力

次に、最終的な画像をページの横に 5 つのブロック ピクセル、下に 5 つのブロック ピクセルだけにしたい場合は、5x5 に縮小してから、元のサイズに戻すことができます。

convert start.png -scale 5x5 -scale 600x600 result.png

ここに画像の説明を入力

または、10x10 のブロック ピクセルに移動する場合は、次のようにします。

convert start.png -scale 10x10 -scale 600x600 result2.png

ここに画像の説明を入力

于 2016-11-28T09:19:14.677 に答える
0

これを書いた方法では、画像は変数で指定されたサイズのピクセルに処理さnxnれnますpixelation。増やすpixelationと、望ましい「粗さ」が得られます。

于 2016-11-27T20:47:00.647 に答える