pixelate

Pixelate an image with canvas

Usage no npm install needed!

<script type="module">
  import pixelate from 'https://cdn.skypack.dev/pixelate';
</script>

README

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