pixelate

0.0.5 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i pixelate

Weekly Downloads

105

Version

0.0.5

License

MIT

Last publish

Collaborators

  • miguelmota