an image pixelating JavaScript library
Demo
The main demo uses vanilla JavaScript and presents a few images with example manipulations using the library.
There is also a demo using the jQuery plugin and Green Sock Tween in order to animate the pixelating effect, see the original blog post for more information.
Blog Post
The blog post includes a write up of the build process and thought process used for version 1. Version 2 was a full re-factor but the logic used is still the same.
Usage
The library can be installed from npm
npm install --save pixel-flow
let images = Arraylet pixelFlows = images// be aware, creating the pixelate images removes the images from the DOM // then you can manipulate individual PixelFlow instances// wait 5 seconds
jQuery plugin
The jQuery plugin can be installed from npm as well.
npm install --save pixel-flow jquery
This library does not come with jQuery packaged, you must install separately.
// Converts the image to a pixelated image at 32 pixel resolutionvar $pixel = // Runs animation on that same image to return to base image.// Notice I'm selecting the canvas that replaced the image. // You should use the original returned reference since the// element is no longer an img element but a canvas$pixel // or you can access the instance directly by fetching it from// the jQuery data on the $pixelvar pixel = $pixeldata'plugin_PixelFlow'pixel