Pixelate Save Abandoned

Pixelate an image with canvas.

Project 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

Open Source Agenda is not affiliated with "Pixelate" Project. README Source: miguelmota/pixelate
Stars
86
Open Issues
0
Last Commit
6 years ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating