Сейчас я получаю все пиксели с помощью 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

enter image description here

Для второго я использовал команду

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

Проблема с этим методом в том, что я не знаю, как указать фактический размер пикселя.

Так возможно ли получить второй результат с помощью этого цикла for. Или лучше использовать imagemagick -scale, но если кто-то может помочь с математикой, я могу получить фактический размер пикселя, было бы здорово.

0
Alex 27 Ноя 2016 в 23:40

2 ответа

Лучший ответ

Не уверен, с какой математикой вы боретесь, но если мы начнем с изображения 600x600, например:

enter image description here

Затем, если вы хотите, чтобы окончательное изображение имело всего 5 блочных пикселей по ширине и 5 блочных пикселей по странице, вы можете масштабировать его до 5x5, а затем снова масштабировать до исходного размера:

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

enter image description here

Или, если вы хотите перейти к 10x10 блочным пикселям:

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

enter image description here

2
citizen conn 31 Май 2017 в 15:58

Как вы это написали, изображение преобразуется в пиксели размера nxn, где n задается вашей переменной pixelation. Увеличение pixelation обеспечит желаемую «грубость».

0
jxmorris12 27 Ноя 2016 в 20:47