Tiny jQuery Plugin For Image Pixelation - Pixelate.js
File Size: | 78.3 KB |
---|---|
Views Total: | 1100 |
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:
- 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.