jQuery Plugin To Pixelate Images Using Html5 Canvas

Pixelate is an image handling plugin for jQuery which allows to pixelate an image with a custom percentage of pixelation, based on HTML5 <canvas> element.

See also:

• Pixelating An Image Using jQuery Pixelate Plugin

How to use it:

1. Load the jQuery library and jQuery pixelate plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pixelate.js"></script>

2. Insert an image you want to pixelate in the page.

<img src="img/1.jpg" />

3. Call the plugin on the image.

<script>
$(document).ready(function(){
$("img").pixelate({
focus : 0.05, // The percentage of pixelation to perform, a value between 0 and 1
canvasID  : "pCanvas" //  Takes a string which designates the ID to be applied to the <canvas> elements generated by the plugin.
});
});
</script>

---

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