React JIMP
JIMP's React implementation for image manipulation
Installation
npm install --save react-jimp
Example usage (width, height and alt are optional):
- Add loadBlur to display blurred image on load
import { Jimage } from "react-jimp";
import testImage from "../assets/testimg.png";
function App() {
return (
<div className="App">
// Pass the props as shown in the documentation
<Jimage
src={testImage}
pixelate="5"
mirror="true, false"
greyscale
color={[{ apply: "hue", params: [-90] }]}
loadBlur
/>
</div>
);
}
Methods
Import the component from package
{
contain: "w, h",
cover: "w, h",
resize: "w, h",
scale: "f",
scaleToFit: "w, h",
autocrop: "tolerance, frames",
autocrop: "options",
crop: "x, y, w, h",
flip: "horz, vert",
mirror: "horz, vert",
rotate: "deg",
brightness: "val",
contrast: "val",
dither565: "bool" ,
greyscale: "bool",
invert: "bool",
normalize: "bool",
hasAlpha: "bool",
fade: "f",
opacity: "f",
opaque: "bool",
background: "hex",
gaussian: "r",
blur: "r",
posterize: "n",
sepia: "bool",
pixelate: "size"
}
Colour manipulation
<Jimage
src="./img.jpg"
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 |
License
MIT © AykutSarac# React Jimp
JavaScript Image Manipulation Program (JIMP) 's component based React implementation. JIMP is an image processing library for Node written entirely in JavaScript, with zero native dependencies.