Pixelating Images Using jQuery and Canvas - pixel-flow

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.