New ! jQuery.Colorimazer Compatible bowser list

What is it?

jQuery.Colorimazer, is an jQuery Plugin that allows basic color manipulations such as grayscale, inverse, polarize, opacity, hue, colorize...

It copies the image in an canvas and allows modification before resourcing the image element. jQuery.Colorimazer can be chained and applied on many elements.

Download here or on GitHub.

Original picture

Original picture

Grayscale

Average

Grayscale by average

Natural

Grayscale by natural

Luminosity

Grayscale by luminosity

Lightness

Grayscale by lightness

Red

Grayscale by red value

Blue

Grayscale by green value

Green

Grayscale by blue value

Usage

Basics

Easy as possible, .grayscale() is enough!

$("#gray").grayscale();

Another grayscale? Add a parameter!

  • { mode: "average" } - Default
  • { mode: "natural" }
  • { mode: "lightness" }
  • { mode: "luminosity" }
  • { mode: "red" }
  • { mode: "blue" }
  • { mode: "green" }

Effect

Usage

Inverse

If you want to inverse your image just do:

$("#inverse").effect({mode: "inverse"});

Solarize

Maybe you want to solarize?

$("#solarize").effect({mode: "solarize"});
  • { mode: "solarize" } - Default operator: less, solarize: 50, intensity: average
  • { mode: "solarize", operator: "greater" }
  • { mode: "solarize", solarize: 25,
    intensity: "natural" }
  • operator allows you to choose if you want low or higth luminosity solarized
  • solarize represents the comparition value of solarization (percent)
  • intensity represents the algorithm of light intensity (same as grayscale)

Blur

Maybe you want to blur?

$("#blur").effect({mode: "blur"});
  • { mode: "blur" } - Default radius: 3
  • { mode: "blur", radius: 5 }
  • { mode: "blur", radius: 9 }
  • radius radius for guassian blur (pixel)

Inverse

Inverse

Solarize (less)

Solarize by less comparation

Solarize (greater)

Solarize by greater comparation

Solarize (limit)

Solarize with custom limit

Blur

Blur by default

Blur radius 5

Blur radius 5

Blur radius 9

Blur radius 9

Hue

Hue 180°

Hue of 180 degrees

Sat -55%

Hue -55% saturation

Value 40%

Hue +40% value

All

Hue 180 degrees, +55% saturation, -40% value

Usage

Basics

You need to rotate yours colors? You can use .hue(180) to rotate by 180 degrees!

$("#hue").hue({ mode: "add", hue: 180 });
  • { mode: "add", saturation: -55 } - Default mode: add
  • { mode: "add", value: 40 }
  • { mode: "add", hue: 180, saturation: -55, value: 40 }
  • mode mode of application
  • hue angle of rotation (degrees)
  • saturation represents the saturation (percent)
  • value represents the value of the color (percent)

Modes

  • add this mode add a percentage of the maximum value (= value + percent * 255)
  • multiply this mode add a percentage of the current value (= value + percent * value)
  • replace this mode replace the value (= percent * 255)

Colorize

Usage

Basics

You need to colorize your picture? You can use .colorize()

$("#colorize").colorize({ mode: "add", r: 80 });
  • { mode: "add", r: -55 }
  • { mode: "add", grayscale: "average", g: 40 }
  • { mode: "add", b: 10, r: -55, g: 40 }
  • mode mode of application
  • grayscale grayscal apply before colorization
  • r red value (percent)
  • g green value (percent)
  • b blue value (percent)

Modes

  • add this mode add a percentage of the maximum value (= value + percent * 255)
  • multiply this mode add a percentage of the current value (= value + percent * value)
  • replace this mode replace the value (= percent * 255)

Colorize

Colorize

From gray

Colorize by gray

Replace

Colorize by replacing

Multiply

Colorize by multiplication

Custom

You can .save() and .restore() an image. (one save deep)

And also create .custom() function

$("img").save().custom(function(pixel, informations) {
    // pixel for the current pixel, informations for the image informations

    // pixel.x or .y for coordonates
    // informations.height or .width for dimension
    // informations.pixel(x, y) for one pixel
    // informations.pixel(x, y, newpixel) for apply one pixel like when you flip

    // apply 0 value on red by pixel.r = 0;

    // Like this:
    pixel.r = 255 * Math.random();
    pixel.g = 255 * Math.random();
    pixel.b = 255 * Math.random();
});

$(".btn").on("click", function() {
    $("img").restore();
});

Here I am!

My website!