maxauri / pandora

Javascript image processor with HTML5 canvas.

Pandora

Pandora processes images using HTML5 canvas and applies filters like Instagram, Facebook or other apps which allow image customization. The script takes a queue list and processes the source image applying effects layer over layer. That means you can use multiple effects over your images and obtain new effects time by time!

Low quality images due to GIF format

##Let's start to use Pandora It requires just 3 steps : ###1. Include First of all you need to include pandora.js on your .html page : ```html <script type="text/javascript" src="pandora.js"></script> ``` ###2. Set up targets Pandora requires 3 attributes applied inline on ```

``` - `src` : Contains the path of the image target - `pandora` : Pandora's class target - `data-queue` : Contains the queue of Pandora's effects you want to apply

Let's give an example :

<img src="myImage1.png" class="pandora" data-queue="colorfull();">
<img src="myImage2.png" class="pandora" data-queue="bw();brightness(10);contrast(30);">
...
<img src="myImageX.png" class="pandora" data-queue="colorBalance(40, 20, 20);">

Pandora creates off screen canvas and returns a new <img> with BASE64 url from it which replace the initial one.

###3. Start Pandora Start Pandora creating a Pandora object in the end of body :

<script type="text/javascript>
  var PandoraBox = new Pandora();
</script>

###HTML5 Support If a browser has some issue with Pandora all your initial images will remain rendered on the screen without effects and without blank screen.

Pandora Effects

Pandora offers many effects which you can apply over your images

###Presets A set of compounds effects ready to use without requiring any parameter

Preset	Release	Description
bw()	1.0	Black and white effect
redBw()	1.0	Red B&W preset
darkBw()	1.0	Dark B&W preset
brilliantRed()	1.0	High Red and Brown preset
vintage()	1.0	Vintage preset
vintage2()	1.0	Vintage preset
sprite()	1.0	High contrast and colorfull preset
colorfull()	1.0	Colorfull preset
fluoNight()	1.0	Colorfull preset perfect for night image (party etc)

###Effects A set of simple effects

Effect	Parameters	Release	Description
noise()	- value(optional) : Noise intensity	1.0	Noise effect
invert()	- R : Boolean invert Red channel - G : Boolean invert Green channel - B : Boolean invert blue channel - intensity(optional) : Intensity value adjustment	1.0	Invert effect
blur()	- value(optional) : Blur ratio	1.0	Blur effect
sepia()		1.0	Sepia effect
HDR()		1.0	HDR effect
fill()	- blendMode : Blend mode (source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy, xor, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity) - fillingType : Filling type (color or gradient) - fillingValue : Filling value - alpha : Opacity value	1.0	Color or gradient layer with blending

Adjustments

A set of adjustments

Adjustment	Parameters	Release	Description
brightness()	- value : Adjustment value	1.0	Brightness adjustment
contrast()	- value : Contrast value	1.0	Contrast adjustment
colorBalance()	- R : Adjustment value of Red channel [0 to 255] - G : Adjustment value of Green channel [0 to 255] - B : Adjustment value of Blue channel [0 to 255]	1.0	Color balance
autoAdj()		1.0	Brightness and contrast auto adjustment
exposure()	- value : Exposure value [0 to 1]	1.0	Exposure adjustment
selectiveCorrection() BETA	- R, C, M, Y, K : CMYK Adjustment for Red channel - Y, C, M, Y, K : CMYK Adjustment for Yellow channel - G, C, M, Y, K : CMYK Adjustment for Green channel - C, C, M, Y, K : CMYK Adjustment for Cyan channel - B, C, M, Y, K : CMYK Adjustment for Blue channel - M, C, M, Y, K : CMYK Adjustment for Magenta channel	1.0	Selective color correction similar to Adobe Photoshop (CMYK adjustment values don't correspond with Adobe's tool).