node.jsimageimagemagickpixelate

Pixelate image in node js


What I am doing now is, I am getting all pixels with var getPixels = require("get-pixels"), then I am looping over the array of pixels with this code:

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

    }
}

The problem with this method is that the result image is too sharp. enter image description here

What I am looking for is something, similar to this one which has been done with ImageMagick -sale

enter image description here

The command which I've used for the second one is

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

the problem with this method is that I don't know how to specify the actual pixel size.

So is it possible to get the second result with that for loop. Or is better to use imagemagick -scale but if some one can help with the math, so I can have actual pixel size would be great.


Solution

  • Not sure what maths you are struggling with, but if we start with a 600x600 image like this:

    enter image description here

    Then, if you want the final image to have just 5 blocky pixels across and 5 blocky pixels down the page, you can scale it down to 5x5 and then scale it back up to its original size:

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

    enter image description here

    Or, if you want to go to 10x10 blocky pixels:

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

    enter image description here