@jimp/plugin-color

What is @jimp/plugin-color?

@jimp/plugin-color is a plugin for the Jimp image processing library that provides various color manipulation functionalities. It allows users to perform operations such as adjusting brightness, contrast, and applying color filters to images.

What are @jimp/plugin-color's main functionalities?

Adjust Brightness

This feature allows you to adjust the brightness of an image. The value can range from -1 (darken) to 1 (brighten).

const Jimp = require('jimp');
Jimp.read('path/to/image.jpg').then(image => {
  image.brightness(0.5) // increase brightness by 50%
       .write('path/to/output.jpg');
});

Adjust Contrast

This feature allows you to adjust the contrast of an image. The value can range from -1 (decrease contrast) to 1 (increase contrast).

const Jimp = require('jimp');
Jimp.read('path/to/image.jpg').then(image => {
  image.contrast(0.5) // increase contrast by 50%
       .write('path/to/output.jpg');
});

Apply Color Filter

This feature allows you to apply a color filter to an image. You can specify the color and the intensity of the filter.

const Jimp = require('jimp');
Jimp.read('path/to/image.jpg').then(image => {
  image.color([{ apply: 'red', params: [100] }]) // apply red filter
       .write('path/to/output.jpg');
});

Other packages similar to @jimp/plugin-color

sharp

Sharp is a high-performance image processing library that supports various color manipulation functionalities such as brightness, contrast, and color filters. It is known for its speed and efficiency compared to Jimp.

gm

GraphicsMagick (gm) is a powerful image processing library that provides extensive color manipulation features. It is more feature-rich and can handle a wider range of image formats compared to Jimp.

image-js

Image-js is a versatile image processing library that offers various color manipulation functionalities. It is designed to be easy to use and integrates well with other JavaScript libraries.

README

@jimp/plugin-color

Jimp color methods.

Bitmap manipulation to adjust the color in an image.

color

Apply multiple color modification rules

• @param {array} actions list of color modification rules, in following format: { apply: '', params: [ ] }
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.color([{ apply: "red", params: [100] }]);
}

main();

Jimp supports advanced colour manipulation using a single method as follows:

image.color([
  { apply: "hue", params: [-90] },
  { apply: "lighten", params: [50] },
  { apply: "xor", params: ["#06D"] },
]);

The method supports the following modifiers:

Modifier	Description
lighten {amount}	Lighten the color a given amount, from 0 to 100. Providing 100 will always return white (works through TinyColor)
brighten {amount}	Brighten the color a given amount, from 0 to 100 (works through TinyColor)
darken {amount}	Darken the color a given amount, from 0 to 100. Providing 100 will always return black (works through TinyColor)
desaturate {amount}	Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling greyscale (works through TinyColor)
saturate {amount}	Saturate the color a given amount, from 0 to 100 (works through TinyColor)
greyscale {amount}	Completely desaturates a color into greyscale (works through TinyColor)
spin {degree}	Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing - since it sets the hue back to what it was before. (works through TinyColor)
hue {degree}	Alias for spin
mix {color, amount}	Mixes colors by their RGB component values. Amount is opacity of overlaying color
tint {amount}	Same as applying mix with white color
shade {amount}	Same as applying mix with black color
xor {color}	Treats the two colors as bitfields and applies an XOR operation to the red, green, and blue components
red {amount}	Modify Red component by a given amount
green {amount}	Modify Green component by a given amount
blue {amount}	Modify Blue component by a given amount

brightness

Adjusts the brightness of the image

• @param {number} val the amount to adjust the brightness, a number between -1 and +1
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.brightness(20);
}

main();

contrast

Adjusts the contrast of the image

• @param {number} val the amount to adjust the contrast, a number between -1 and +1
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.contrast(70);
}

main();

posterize

Apply a posterize effect

• @param {number} n the amount to adjust the contrast, minimum threshold is two
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.posterize(5);
}

main();

opacity

Multiplies the opacity of each pixel by a factor between 0 and 1

• @param {number} f A number, the factor by which to multiply the opacity of each pixel
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.opacity(80);
}

main();

sepia

Applies a sepia tone to the image

• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.sepia();
}

main();

fade

Fades each pixel by a factor between 0 and 1

• @param {number} f A number from 0 to 1. 0 will haven no effect. 1 will turn the image completely transparent.
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.fade(0.7);
}

main();

convolution

Sum neighbor pixels weighted by the kernel matrix. You can find a nice explanation with examples at GIMP's Convolution Matrix plugin

• @param {array} kernel a matrix to weight the neighbors sum
• @param {number} edgeHandling (optional) define how to sum pixels from outside the border
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.convolution(
    [
      [-1, -1, -1],
      [-1, 8, -1],
      [-1, -1, -1],
    ],
    jimp.EDGE_EXTEND
  );
}

main();

opaque

Set the alpha channel on every pixel to fully opaque

• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.opaque();
}

main();

pixelate

Pixelates the image or a region

• @param {number} size the size of the pixels
• @param {number} x (optional) the x position of the region to pixelate
• @param {number} y (optional) the y position of the region to pixelate
• @param {number} w (optional) the width of the region to pixelate
• @param {number} h (optional) the height of the region to pixelate
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  image.pixelate(10);
}

main();

convolute

Applies a convolution kernel to the image or a region

• @param {array} kernel the convolution kernel
• @param {number} x (optional) the x position of the region to apply convolution to
• @param {number} y (optional) the y position of the region to apply convolution to
• @param {number} w (optional) the width of the region to apply convolution to
• @param {number} h (optional) the height of the region to apply convolution to
• @param {function(Error, Jimp)} cb (optional) a callback for when complete

import jimp from "jimp";

async function main() {
  const image = await jimp.read("test/image.png");

  // make me better
  image.pixelate(kernal);
}

main();

Changelog

v0.22.6 (Fri Feb 24 2023)

:tada: This release contains work from a new contributor! :tada:

Thank you, Daniell (@daniellwdb), for all your work!

🐛 Bug Fix

• jimp, @jimp/plugin-color
  • Export ColorActionName enum #1205 (@daniellwdb)

Authors: 1

• Daniell (@daniellwdb)

---