{"id":15377310,"url":"https://github.com/aykutsarac/react-jimp","last_synced_at":"2025-07-15T04:11:01.534Z","repository":{"id":65484785,"uuid":"356835539","full_name":"AykutSarac/react-jimp","owner":"AykutSarac","description":"🎨 Easy image manipulation component for React. JIMP's React implementation.","archived":false,"fork":false,"pushed_at":"2021-11-15T08:27:39.000Z","size":804,"stargazers_count":4,"open_issues_count":5,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T22:35:28.457Z","etag":null,"topics":["image-manipulation","jimp","react","react-jimp"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-jimp","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AykutSarac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-11T10:20:49.000Z","updated_at":"2025-01-29T12:05:17.000Z","dependencies_parsed_at":"2023-01-25T11:55:12.491Z","dependency_job_id":null,"html_url":"https://github.com/AykutSarac/react-jimp","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AykutSarac%2Freact-jimp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AykutSarac%2Freact-jimp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AykutSarac%2Freact-jimp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AykutSarac%2Freact-jimp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AykutSarac","download_url":"https://codeload.github.com/AykutSarac/react-jimp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249112706,"owners_count":21214749,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-manipulation","jimp","react","react-jimp"],"created_at":"2024-10-01T14:10:27.925Z","updated_at":"2025-04-15T16:50:21.348Z","avatar_url":"https://github.com/AykutSarac.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React JIMP\n\n\u003e JIMP\u0026#x27;s React implementation for image manipulation\n\n[![NPM](https://img.shields.io/npm/v/react-jimp.svg)](https://www.npmjs.com/package/react-jimp) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Installation\n\n```bash\nnpm install --save react-jimp\n```\n\nExample usage (width, height and alt are optional):\n\n- Add loadBlur to display blurred image on load\n\n```js\nimport { Jimage } from \"react-jimp\";\nimport testImage from \"../assets/testimg.png\";\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      // Pass the props as shown in the documentation\n      \u003cJimage\n        src={testImage}\n        pixelate=\"5\"\n        mirror=\"true, false\"\n        greyscale\n        color={[{ apply: \"hue\", params: [-90] }]}\n        loadBlur\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Methods\n\nImport the component from package\n\n```js\n{\n /* Resize */\n contain: \"w, h\",  // scale the image to the given width and height, some parts of the image may be letter boxed\n cover: \"w, h\", // scale the image to the given width and height, some parts of the image may be clipped\n resize: \"w, h\", // resize the image. Jimp.AUTO can be passed as one of the values.\n scale: \"f\",  // scale the image by the factor f\n scaleToFit: \"w, h\",  // scale the image to the largest size that fits inside the given width and height\n // An optional resize mode can be passed with all resize methods.\n\n /* Crop */\n autocrop: \"tolerance, frames\", // automatically crop same-color borders from image (if any), frames must be a Boolean\n autocrop: \"options\",  // automatically crop same-color borders from image (if any), options may contain tolerance, cropOnlyFrames, cropSymmetric, leaveBorder\n crop: \"x, y, w, h\",  // crop to the given region\n\n /* Flip and rotate */\n flip: \"horz, vert\",  // flip the image horizontally or vertically\n mirror: \"horz, vert\",  // an alias for flip\n rotate: \"deg\",  // rotate the image clockwise by a number of degrees. Optionally, a resize mode can be passed. If `false` is passed as the second parameter, the image width and height will not be resized.\n\n /* Colour */\n\n brightness: \"val\",  // adjust the brighness by a value -1 to +1\n contrast: \"val\", // adjust the contrast by a value -1 to +1\n dither565: \"bool\" , // ordered dithering of the image and reduce color space to 16-bits (RGB565)\n greyscale: \"bool\",  // remove colour from the image\n invert: \"bool\",  // invert the image colours\n normalize: \"bool\",  // normalize the channels in an image\n\n /* Alpha channel */\n\n hasAlpha: \"bool\",  // determines if an image contains opaque pixels\n fade: \"f\",  // an alternative to opacity, fades the image by a factor 0 - 1. 0 will haven no effect. 1 will turn the image\n opacity: \"f\",  // multiply the alpha channel by each pixel by the factor f, 0 - 1\n opaque: \"bool\",  // set the alpha channel on every pixel to fully opaque\n background: \"hex\",  // set the default new pixel colour (e.g. 0xFFFFFFFF or 0x00000000) for by some operations (e.g. image.contain and\n\n /* Blurs */\n\n gaussian: \"r\",  // Gaussian blur the image by r pixels (VERY slow)\n blur: \"r\", // fast blur the image by r pixels\n\n /* Effects */\n\n posterize: \"n\",  // apply a posterization effect with n level\n sepia: \"bool\",  // apply a sepia wash to the image\n pixelate: \"size\"  // apply a pixelation effect to the image\n}\n```\n\n## Colour manipulation\n\n```js\n\u003cJimage\n src=\"./img.jpg\"\n color={[\n  { apply: 'hue', params: [-90] },\n  { apply: 'lighten', params: [50] },\n  { apply: 'xor', params: ['#06D'] }\n ]}\n\u003e\n```\n\nThe method supports the following modifiers:\n\n| Modifier                | Description                                                                                                                                                                                                      |\n| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **lighten** {amount}    | Lighten the color a given amount, from 0 to 100. Providing 100 will always return white (works through [TinyColor](https://github.com/bgrins/TinyColor))                                                         |\n| **brighten** {amount}   | Brighten the color a given amount, from 0 to 100 (works through [TinyColor](https://github.com/bgrins/TinyColor))                                                                                                |\n| **darken** {amount}     | Darken the color a given amount, from 0 to 100. Providing 100 will always return black (works through [TinyColor](https://github.com/bgrins/TinyColor))                                                          |\n| **desaturate** {amount} | Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling greyscale (works through [TinyColor](https://github.com/bgrins/TinyColor))                                         |\n| **saturate** {amount}   | Saturate the color a given amount, from 0 to 100 (works through [TinyColor](https://github.com/bgrins/TinyColor))                                                                                                |\n| **greyscale** {amount}  | Completely desaturates a color into greyscale (works through [TinyColor](https://github.com/bgrins/TinyColor))                                                                                                   |\n| **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](https://github.com/bgrins/TinyColor)) |\n| **hue** {degree}        | Alias for **spin**                                                                                                                                                                                               |\n| **mix** {color, amount} | Mixes colors by their RGB component values. Amount is opacity of overlaying color                                                                                                                                |\n| **tint** {amount}       | Same as applying **mix** with white color                                                                                                                                                                        |\n| **shade** {amount}      | Same as applying **mix** with black color                                                                                                                                                                        |\n| **xor** {color}         | Treats the two colors as bitfields and applies an XOR operation to the red, green, and blue components                                                                                                           |\n| **red** {amount}        | Modify Red component by a given amount                                                                                                                                                                           |\n| **green** {amount}      | Modify Green component by a given amount                                                                                                                                                                         |\n| **blue** {amount}       | Modify Blue component by a given amount                                                                                                                                                                          |\n\n## License\n\nMIT © [AykutSarac](https://github.com/AykutSarac)# React Jimp\nJavaScript 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faykutsarac%2Freact-jimp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faykutsarac%2Freact-jimp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faykutsarac%2Freact-jimp/lists"}