{"id":17968196,"url":"https://github.com/lijinke666/react-image-process","last_synced_at":"2025-03-25T09:30:36.558Z","repository":{"id":26525904,"uuid":"109110961","full_name":"lijinke666/react-image-process","owner":"lijinke666","description":":art: a image process component for react","archived":false,"fork":false,"pushed_at":"2022-12-08T17:17:49.000Z","size":8314,"stargazers_count":77,"open_issues_count":27,"forks_count":16,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T23:16:47.181Z","etag":null,"topics":["base64","canvas","clip","compress","filter","image-magician","image-process","magician","photo","photo-manager","react","react-image","watermark"],"latest_commit_sha":null,"homepage":"https://lijinke666.github.io/react-image-process/","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/lijinke666.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":"2017-11-01T09:15:45.000Z","updated_at":"2025-01-07T04:56:16.000Z","dependencies_parsed_at":"2022-09-15T19:53:19.430Z","dependency_job_id":null,"html_url":"https://github.com/lijinke666/react-image-process","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Freact-image-process","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Freact-image-process/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Freact-image-process/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Freact-image-process/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lijinke666","download_url":"https://codeload.github.com/lijinke666/react-image-process/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245434996,"owners_count":20614809,"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":["base64","canvas","clip","compress","filter","image-magician","image-process","magician","photo","photo-manager","react","react-image","watermark"],"created_at":"2024-10-29T14:20:31.550Z","updated_at":"2025-03-25T09:30:36.541Z","avatar_url":"https://github.com/lijinke666.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-image-process\n\n[![npm](https://img.shields.io/npm/dm/react-image-process.svg?style=flat-square)](https://www.npmjs.com/package/react-image-process)\n[![npm version](https://img.shields.io/npm/v/react-image-process.svg?style=flat-square)](https://badge.fury.io/js/react-image-process)\n[![jest](https://facebook.github.io/jest/img/jest-badge.svg)](https://github.com/facebook/jest)\n\n\u003e :art: A image process component for react, like compressed image,clip image, add watermarking of image\n\n[normal version](https://github.com/lijinke666/photo-magician)\n\n## Installation\n\nusing `yarn` :\n\n```\nyarn add react-image-process\n```\n\nusing `npm` :\n\n```\nnpm install react-image-process --save\n```\n\n## Screenshots\n\n![lightTheme](https://github.com/lijinke666/react-image-process/blob/master/assetsImg/screenshot.png)\n\n## Example\n\nonline example : [https://lijinke666.github.io/react-image-process/](https://lijinke666.github.io/react-image-process/)\n\n[Source Code](https://github.com/lijinke666/react-image-process/blob/master/example/example.js)\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactImageProcess from 'react-image-process';\n\nconst onComplete = data =\u003e {\n  console.log('data:', data);\n};\n\nReactDOM.render(\n  \u003cReactImageProcess mode=\"base64\" onComplete={onComplete}\u003e\n    \u003cimg src=\"YOUR_IMG_URL\" /\u003e\n  \u003c/ReactImageProcess\u003e,\n  document.getElementById('root')\n);\n```\n\nSupport multiple Images\n\n```jsx\n\u003cReactImageProcess mode=\"compress\" quality={0.2} onComplete={onComplete}\u003e\n  \u003cimg src=\"YOUR_IMG_URL\" /\u003e\n  \u003cimg src=\"YOUR_IMG_URL\" /\u003e\n\u003c/ReactImageProcess\u003e\n```\n\n\u003e rotate\n\n```jsx\n\u003cReactImageProcess mode=\"rotate\" rotate={30}\u003e\n  \u003cimg src=\"YOUR_IMG_URL\" /\u003e\n\u003c/ReactImageProcess\u003e\n```\n\n\u003e get primary color\n\n```jsx\n\u003cReactImageProcess mode=\"primaryColor\" onComplete={color =\u003e console.log(color)}\u003e\n  \u003cimg src=\"YOUR_IMG_URL\" /\u003e\n\u003c/ReactImageProcess\u003e\n```\n\n\u003e waterMark\n\n```jsx\n\u003cReactImageProcess\n  mode=\"waterMark\"\n  waterMarkType=\"image\"\n  waterMark={YOUR_WATER_URL}\n  width={60}\n  height={60}\n  opacity={0.7}\n  coordinate={[430, 200]}\n\u003e\n  \u003cimg src=\"YOUR_IMG_URL\" /\u003e\n\u003c/ReactImageProcess\u003e\n```\n\n```jsx\n\u003cReactImageProcess\n  mode=\"waterMark\"\n  waterMarkType=\"text\"\n  waterMark={'WATER'}\n  fontBold={false}\n  fontSize={20}\n  fontColor=\"#396\"\n  coordinate={[10, 20]}\n\u003e\n  \u003cimg src=\"YOUR_IMG_URL\" /\u003e\n\u003c/ReactImageProcess\u003e\n```\n\n\u003e imageFilter\n\n```jsx\n\u003cReactImageProcess mode=\"filter\" filterType=\"vintage\"\u003e\n  \u003cimg src=\"YOUR_IMG_URL\" /\u003e\n\u003c/ReactImageProcess\u003e\n```\n\n## API\n\n| Property      | Description                                                                                                                      | Type                   | Default                |\n| ------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ---------------------- |\n| mode          | can be set to `base64` `clip` `compress` `rotate` `waterMark` `filter` `primaryColor`                                            | `string`               | `base64`               |\n| onComplete    | The callback after trans complete conversion                                                                                     | function(base64Data){} | `-`                    |\n| outputType    | image data output type of `blob`                                                                                                 | `dataUrl`              | `string`               | `dataUrl` |\n| scale         | When the mode is equal to 'clip', the zoom scale of the image.                                                                   | `number`               | `1.0`                  |\n| coordinate    | When the mode is equal to 'clip', coordinate of the image. like `[[x1,y1],[x2,y2]]`, if mode equal to `waterMark` like `[x1,y1]` | `number[]`             | `-`                    |\n| quality       | When the mode is equal to 'compress', quality of the image.                                                                      | `number`               | `0.92`                 |\n| rotate        | When the mode is equal to 'rotate', rotate deg of the image.                                                                     | `number`               | `-`                    |\n| waterMark     | When the mode is equal to 'waterMark', can be set to `image` or `text`                                                           | `string|ReactNode`     | `-`                    |\n| waterMarkType | When the mode is equal to 'waterMark', can be set to `image` or `text`                                                           | `string`               | `text`                 |\n| fontBold      | When the mode is equal to 'waterMark' and waterMark equal to `text` ,the font is bold.                                           | `boolean`              | `false`                |\n| fontSize      | When the mode is equal to 'waterMark' and waterMark equal to `text` ,the font size                                               | `number`               | `20`                   |\n| fontColor     | When the mode is equal to 'waterMark' and waterMark equal to `text` ,the font color                                              | `string`               | `rgba(255,255,255,.5)` |\n| width         | When the mode is equal to 'waterMark' and waterMark equal to `image` ,the water width                                            | `number`               | `50`                   |\n| height        | When the mode is equal to 'waterMark' and waterMark equal to `image` ,the water height                                           | `number`               | `50`                   |\n| opacity       | When the mode is equal to 'waterMark' and waterMark equal to `image` ,the water opacity range [0-1]                              | `number`               | `0.5`                  |\n| filterType    | When the mode is equal to 'filter', can be set to `vintage` `blackWhite` `relief` `blur`                                         | `string`               | `vintage`              |\n\n## Development\n\n```\ngit clone https://github.com/lijinke666/react-image-process.git\nnpm install\nnpm start\n```\n\n## Properties\n\n```ts\nexport type ReactImageProcessMode =\n  | 'base64'\n  | 'clip'\n  | 'compress'\n  | 'rotate'\n  | 'waterMark'\n  | 'filter'\n  | 'primaryColor';\n\nexport type ReactImageProcessWaterMarkType = 'image' | 'text';\nexport type ReactImageProcessFilterType =\n  | 'vintage'\n  | 'blackWhite'\n  | 'relief'\n  | 'blur';\nexport type ReactImageProcessOutputType = 'blob' | 'dataUrl';\n\nexport interface ReactImageProcessProps {\n  mode: ReactImageProcessMode;\n  waterMarkType: ReactImageProcessWaterMarkType;\n  filterType: ReactImageProcessFilterType;\n  outputType: ReactImageProcessOutputType;\n  waterMark: string;\n  rotate: number;\n  quality: number;\n  coordinate: number[];\n  width: number;\n  height: number;\n  opacity: number;\n  fontColor: number;\n  fontSize: number;\n  fontBold: number;\n  onComplete: (data: Blob | string) =\u003e void;\n}\n```\n\n## License\n\n[MIT](https://github.com/lijinke666/react-image-process/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flijinke666%2Freact-image-process","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flijinke666%2Freact-image-process","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flijinke666%2Freact-image-process/lists"}