Pixelating Images Using jQuery and Canvas - pixel-flow
File Size: | 803 KB |
---|---|
Views Total: | 3052 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

pixel-flow is a jQuery image filter plugin that helps you implement pixelating effects on any images using Html5 canvas
.
See also:
- Pixelating An Image Using jQuery Pixelate Plugin
- jQuery Plugin To Pixelate Images Using Html5 Canvas
- Javascript To Pixelate Images Using A Fixed Palette – ditherjs
- Pixelate Images Using JavaScript And Canvas – pixasso-js
Installation:
# NPM $ npm install pixel-flow jquery --save
How to use it:
1. Load the latest version of jQuery library and the jQuery pixel-flow plugin in the html document.
<script src="jquery.min.js"></script> <script src="scripts/pixel-flow.js"></script>
2. Load the GSAP's TweenMax.js in the document if you wish to implement animated pixelating effects on the images.
<script src="TweenMax.min.js"></script>
3. Pixalate the image you provide.
var $pixel = $('img').PixelFlow()
4. Animate the pixelated images back to normal over 2 seconds.
$('canvas').PixelFlow('simpleanimate', 0, 2000)
5. Available options to create custom pixelating effects.
var $pixel = $('img').PixelFlow({ resolution: 16, offsetX: 0, offsetY: 0 })
Changelog:
2018-12-02
- added vanilla JavaScript version
2018-03-12
- bugfix
2015-09-30
- corrected implementation of requestAnimationFrame
2015-05-16
- Update routing
This awesome jQuery plugin is developed by JamesNimlos. For more Advanced Usages, please check the demo page or visit the official website.