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" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/pixelate.js"></script>

3. Initialize the plugin with options.

$('img').pixelate({
  // 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">

Changelog:

2018-07-19

• fix options

2018-03-14

• 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.