Pixelating An Image Using jQuery Pixelate Plugin

File Size: 16.1 KB
Views Total: 3746
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Pixelating An Image Using jQuery Pixelate Plugin

pixelate.js is a small and funny jQuery JavaScript plugin that allows you to pixelate an image (or photo) using javascript and HTML5 canvas element.

It also comes with a reveal option which allows you to reveal the original image on hovers over.

Basic Usage:

1. Insert an image in your web page.

<img src="demo.jpg" width="477" height="437" alt="demo" />

2. Include the jQuery javascript library and jQuery pixelate.js at the end of your page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
<script src="js/pixelate.js"></script>

3. Initialize the plugin with options.

  // The percentage of pixelation to perform, a value between 0 and 1
  value: 0.05, 
  // Reveal the image on hover and remain revealed if clicked
  reveal: true 

4. You can also pass the options by using Html5 data-* attributes.

<img src="demo.jpg" data-pixelate data-value="0.5" data-reveal="true">



  • fix options


  • fix exception when calling via data attrs

This awesome jQuery plugin is developed by 43081j. For more Advanced Usages, please check the demo page or visit the official website.