Tiny jQuery Plugin For Image Pixelation - Pixelate.js

Pixelate.js is a tiny jQuery plugin that makes use of HTML5 canvas to generate retro-style pixel arts from any image with custom pixel size.

See also:

• Pixelating An Image Using jQuery Pixelate Plugin
• jQuery Plugin To Pixelate Images Using Html5 Canvas
• Pixelating Images Using jQuery and Canvas - pixel-flow
• Javascript To Pixelate Images Using A Fixed Palette – ditherjs
• Pixelate Images Using JavaScript And Canvas – pixasso-js
• Generate Pixelated Images With JavaScript And Canvas – Pixel Display

How to use it:

1. Insert the main JavaScript pixelate.js after the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/pixelate.js"></script>

2. Apply the function pixelate to the image and done.

<img class="pixelate" src="example.jpg" />

$(function(){
  $('.pixelate').pixelate({
    // options here
  });
});

3. Customize the pixel size. Default: 0.5.

$(function(){
  $('.pixelate').pixelate({
    focus: 0.6
  });
});

4. Change the default CSS ID applied to the canvas element.

$(function(){
  $('.pixelate').pixelate({
    canvasID: "pixelateCanvas"
  });
});

---

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