AlekseyKorzun / pixelate

Pixelate an image with canvas.

Pixelate

Pixelates an image with canvas by scaling the image down and stretching. The original image src is replaced with the canvas image dataURL.

Demo

https://lab.miguelmota.com/pixelate

Install

npm install pixelate

Usage

Basic example:

var image = document.querySelector('.image');
var pixelate = new Pixelate(image, {
  amount: 0.7, // default: 0, pixelation percentage amount (range from 0 to 1)
});

Another example:

var image = new Image();
image.src = 'images/street.jpeg';

var pixelate = new Pixelate(image, {amount: 0.7});

Re-render with different amount:

pixelate.setAmount(0.5).render();

Make it responsive:

window.onresize = function() {
  pixelate.setWidth(image.parentNode.clientWidth).render();
};

License

MIT