jQuery.Colorimazer Plugin Examples

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" }

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)

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)

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)

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();
});

Author