pixelate
pixelate copied to clipboard
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
.
![](https://raw.githubusercontent.com/miguelmota/pixelate/master/screenshot.gif)
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