Pixelate an image with canvas.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
.editorconfig
.gitattributes
.gitignore
CHANGELOG.md
LICENSE.md
README.md
bower.json
package.json
pixelate.js
screenshot.gif

README.md

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