Tiny jQuery Plugin For Image Pixelation - Pixelate.js

Tiny jQuery Plugin For Image Pixelation - Pixelate.js
File Size: 78.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.