15 Best Javascript Image Effect Libraries

Here are some best JavaScript libraries for adding stunning effects to your images, like blur, sharpen, emboss, lighten, vintage, zoom, etc.

Sticker.js

Sticker.js is a JavaScript library that creates a peeling sticker effect. It does not depend on any other libraries like jQuery.

stickerjs-1

Oridomi

OriDomi is an open source JavaScript library to Fold the DOM like paper. You can use the mouse or touch to manipulate the DOM.

oridomi-2

Magnifier.js

Magnifier.js is a Javascript library enabling magnifying glass effect on an images.

magnifying glass effect on an images

CamanJS

CamanJS is canvas manipulation in Javascript. It’s a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques.

camanjs-4

StackBlur

Mario Klingemann has created a fast implementation of an “almost gaussian blur algorithm” in JavaScript.

stackblur-6

glfx.js

Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone.

glfx-5

Pieces

Pieces allows you to split an image into tiles and animate them with amazing effects. It comes with 300 ready-to-use animations and with a tool that let you create your animation packs. You can use it both with javascript and html markup. With Pieces you can control tiles dimension, speed, stagger, so on.

pieces-7

Intense Images

A stand alone javascript library for viewing images on the full, full screen. Using the touch/mouse position for panning.

intense-image-8

vintageJS

Add a retro/vintage effect to images using the HTML5 canvas element.

vintageJS-9

Add a little magic!

A little jQuery plugin for making DOM elements sparkle (uses Canvas).

making DOM elements sparkle

Filterous.js

Image manipulation library in JavaScript that applies filters to photos à la Instagram on browser. This script take pixel data from a photo that you want to give filter effects, and maniplute its pixels using the canvas element.

filterousjs-11

Blur on Scroll + Simple Parallax

This pen demonstrates a simple medium.com-like blur image on scroll and content parallax. It gets the scroll position using requestAnimationFrame instead of an onScroll event.

blur-12

WebGLImageFilter

Construct a chain of image filters and apply them to an Image or Canvas element. All filters are executed by WebGL Shaders which makes them pretty fast.

WebGLImageFilter-13

Filtrr2.js

Insta-hipster-o-matic images in 6.8kb of JavaScript.

insta-14

jQuery filter.me

jQuery filter.me is a jQuery dependant script that allows you to apply filters to images using Photoshop .acv Curves Adjustment files.

filterme-15


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked