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 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 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 |
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). |