{"id":13422186,"url":"https://github.com/mosch/react-avatar-editor","last_synced_at":"2025-05-14T11:04:26.701Z","repository":{"id":24494903,"uuid":"27899912","full_name":"mosch/react-avatar-editor","owner":"mosch","description":"Small avatar \u0026 profile picture component. Resize and crop uploaded images using a intuitive user interface.","archived":false,"fork":false,"pushed_at":"2025-05-06T11:25:27.000Z","size":19812,"stargazers_count":2431,"open_issues_count":28,"forks_count":377,"subscribers_count":36,"default_branch":"main","last_synced_at":"2025-05-07T10:52:30.940Z","etag":null,"topics":["avatar","crop","image","javascript","profile-picture-component","react"],"latest_commit_sha":null,"homepage":"https://react-avatar-editor.netlify.app/","language":"TypeScript","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/mosch.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2014-12-12T01:22:23.000Z","updated_at":"2025-05-07T05:33:49.000Z","dependencies_parsed_at":"2022-07-10T11:16:19.591Z","dependency_job_id":"c3b4d20e-3ceb-43e0-9abf-8379abad4b1a","html_url":"https://github.com/mosch/react-avatar-editor","commit_stats":{"total_commits":441,"total_committers":74,"mean_commits":5.95945945945946,"dds":0.6349206349206349,"last_synced_commit":"ec059fe82952c94695b2d01fee189ce50e153a63"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosch%2Freact-avatar-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosch%2Freact-avatar-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosch%2Freact-avatar-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mosch%2Freact-avatar-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mosch","download_url":"https://codeload.github.com/mosch/react-avatar-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253508820,"owners_count":21919526,"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":["avatar","crop","image","javascript","profile-picture-component","react"],"created_at":"2024-07-30T23:00:38.690Z","updated_at":"2025-05-14T11:04:26.633Z","avatar_url":"https://github.com/mosch.png","language":"TypeScript","funding_links":[],"categories":["Other Components","UI Components","Uncategorized","TypeScript","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Form Components","Uncategorized"],"readme":"# react-avatar-editor\n\n\u003ca href=\"https://www.npmjs.com/package/react-avatar-editor\"\u003e\u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/react-avatar-editor.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://npmjs.org/package/react-avatar-editor\"\u003e\u003cimg alt=\"Downloads\" src=\"http://img.shields.io/npm/dm/react-avatar-editor.svg\"\u003e\u003c/a\u003e\n[![Build Status](https://travis-ci.org/mosch/react-avatar-editor.svg?branch=master)](https://travis-ci.org/mosch/react-avatar-editor)\n[![Design](https://contribute.design/api/shield/mosch/react-avatar-editor)](https://contribute.design/mosch/react-avatar-editor)\n\nAvatar / profile picture cropping component (like on Facebook). \nResize, crop and rotate your uploaded image using a simple and clean user interface.\n\n## Features\n\n- Fully typed, written in TypeScript\n- Provide your own input controls\n- Resize\n- Crop\n- Rotate\n- Rounded or square image result \n\n## Install\n\nJust use your favorite package manager to add `react-avatar-editor` to your project:\n\n```sh\nyarn add react-avatar-editor\n\nnpm i --save react-avatar-editor\n\npnpm add react-avatar-editor\n```\n\n## [Demo](https://react-avatar-editor.netlify.app/)\n\n![](https://thumbs.gfycat.com/FlawedBlushingGermanwirehairedpointer-size_restricted.gif)\n\n\n## Usage\n\n```javascript\nimport React from 'react'\nimport AvatarEditor from 'react-avatar-editor'\n\nconst MyEditor = () =\u003e {\n  return (\n    \u003cAvatarEditor\n      image=\"http://example.com/initialimage.jpg\"\n      width={250}\n      height={250}\n      border={50}\n      color={[255, 255, 255, 0.6]} // RGBA\n      scale={1.2}\n      rotate={0}\n    /\u003e\n  )\n}\n\nexport default MyEditor\n```\n\n### Props\n\n| Prop                   | Type             | Description                                                                                                                                                                                                                                                          |\n| ---------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| image                  | String\\|File     | The URL of the image to use, or a File (e.g. from a file input).                                                                                                                                                                                                     |\n| width                  | Number           | The total width of the editor.                                                                                                                                                                                                                                       |\n| height                 | Number           | The total height of the editor.                                                                                                                                                                                                                                      |\n| border                 | Number\\|Number[] | The cropping border. Image will be visible through the border, but cut off in the resulting image. Treated as horizontal and vertical borders when passed an array.                                                                                                  |\n| borderRadius           | Number           | The cropping area border radius.                                                                                                                                                                                                                                     |\n| color                  | Number[]         | The color of the cropping border, in the form: [red (0-255), green (0-255), blue (0-255), alpha (0.0-1.0)].                                                                                                                                                          |\n| borderColor            | Number[]         | The color of the 1px border around the mask, in the form: [red (0-255), green (0-255), blue (0-255), alpha (0.0-1.0)]. If not provided, no border will be drawn.                                                                                                     |\n| backgroundColor        | String           | The background color of the image if it's transparent.                                                                                                                                                                                                               |\n| style                  | Object           | Styles for the canvas element.                                                                                                                                                                                                                                       |\n| scale                  | Number           | The scale of the image. You can use this to add your own resizing slider.                                                                                                                                                                                            |\n| position               | Object           | The x and y co-ordinates (in the range 0 to 1) of the center of the cropping area of the image. Note that if you set this prop, you will need to keep it up to date via onPositionChange in order for panning to continue working.                                   |\n| rotate                 | Number           | The rotation degree of the image. You can use this to rotate image (e.g 90, 270 degrees).                                                                                                                                                                            |\n| crossOrigin            | String           | The value to use for the crossOrigin property of the image, if loaded from a non-data URL. Valid values are `\"anonymous\"` and `\"use-credentials\"`. See [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) for more information. |\n| className              | String\\|String[] | className property passed to the canvas element                                                                                                                                                                                                                      |\n| onLoadFailure(event)   | function         | Invoked when an image (whether passed by props or dropped) load fails.                                                                                                                                                                                               |\n| onLoadSuccess(imgInfo) | function         | Invoked when an image (whether passed by props or dropped) load succeeds.                                                                                                                                                                                            |\n| onImageReady(event)    | function         | Invoked when the image is painted on the canvas the first time.                                                                                                                                                                                                      |\n| onMouseUp()            | function         | Invoked when the user releases their mouse button after interacting with the editor.                                                                                                                                                                                 |\n| onMouseMove(event)     | function         | Invoked when the user hold and moving the image.                                                                                                                                                                                                                     |\n| onImageChange()        | function         | Invoked when the user changed the image. Not invoked on the first render, and invoked multiple times during drag, etc.                                                                                                                                               |\n| onPositionChange()     | function         | Invoked when the user pans the editor to change the selected area of the image. Passed a position object in the form `{ x: 0.5, y: 0.5 }` where x and y are the relative x and y coordinates of the center of the selected area.                                     |\n| disableBoundaryChecks  | Boolean          | Set to `true` to allow the image to be moved outside the cropping boundary.                                                                                                                                                                                          |\n| disableHiDPIScaling    | Boolean          | Set to `true` to disable devicePixelRatio based canvas scaling. Can improve performance of very large canvases on mobile devices.                                                                                                                                    |\n\n### Accessing the resulting image\n\nThe resulting image will have the same resolution as the original image, for that you can use `getImage`, regardless of the editor's size.\nIf you want the image sized in the dimensions of the canvas you can use `getImageScaledToCanvas`.\n\n```javascript\nimport React, { useRef } from 'react'\nimport AvatarEditor from 'react-avatar-editor'\n\nconst MyEditor = () =\u003e {\n  const editor = useRef(null);\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cAvatarEditor\n          ref={editor}\n          image=\"http://example.com/initialimage.jpg\"\n          width={250}\n          height={250}\n          border={50}\n          scale={1.2}\n        /\u003e\n        \u003cbutton onClick={() =\u003e {\n          if (this.editor) {\n            // This returns a HTMLCanvasElement, it can be made into a data URL or a blob,\n            // drawn on another canvas, or added to the DOM.\n            const canvas = editor.current.getImage()\n\n            // If you want the image resized to the canvas size (also a HTMLCanvasElement)\n            const canvasScaled = editor.current.getImageScaledToCanvas()\n          }\n        }}\u003eSave\u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nexport default MyEditor\n```\n\n### Adding drag and drop\n\nWe recommend using [react-dropzone](https://github.com/react-dropzone/react-dropzone). It allows you to add\ndrag and drop support to anything really easy. Here is an example how to use it with react-avatar-editor:\n\n```javascript\nimport React, { useState } from 'react'\nimport AvatarEditor from 'react-avatar-editor'\nimport Dropzone from 'react-dropzone'\n\nconst MyEditor = () =\u003e {\n  const [image, setImage] = useState('http://example.com/initialimage.jpg')\n\n  return (\n    \u003cDropzone\n      onDrop={(dropped) =\u003e setImage(dropped[0])}\n      noClick\n      noKeyboard\n      style={{ width: '250px', height: '250px' }}\n    \u003e\n      {({ getRootProps, getInputProps }) =\u003e (\n        \u003cdiv {...getRootProps()}\u003e\n          \u003cAvatarEditor width={250} height={250} image={image} /\u003e\n          \u003cinput {...getInputProps()} /\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/Dropzone\u003e\n  )\n}\n```\n\n### Accessing the cropping rectangle\n\nSometimes you will need to get the cropping rectangle (the coordinates of the area of the image to keep),\nfor example in case you intend to perform the actual cropping server-side.\n\n`getCroppingRect()` returns an object with four properties: `x`, `y`, `width` and `height`;\nall relative to the image size (that is, comprised between 0 and 1). It is a method of AvatarEditor elements,\nlike `getImage()`.\n\n_Note that:_ `getImage()` returns a canvas element and if you want to use it in `src` attribute of `img`, convert it into a blob url.\n\n```js\nconst getImageUrl = async () =\u003e {\n  const dataUrl = editor.current.getImage().toDataURL()\n  const res = await fetch(dataUrl)\n  const blob = await res.blob()\n\n  return window.URL.createObjectURL(blob)\n}\n\n// Usage\nconst imageURL = await getImageUrl()\n\n\u003cimg src={imageURL} ... /\u003e\n```\n\n## Contributing\n\nFor development you can use following build tools:\n\n- `npm run build`: Builds the _minified_ dist file: `dist/index.js`\n- `npm run watch`: Watches for file changes and builds _unminified_ into: `dist/index.js`\n- `npm run demo:build`: Builds the demo based on the dist file `dist/index.js`\n- `npm run demo:watch`: Run webpack-dev-server. Check demo website [localhost:8080](http://localhost:8080)\n\n### Kudos\n\nKudos and thanks to [dan-lee](https://github.com/dan-lee) for the work \u0026 many contributions to this project!\nAlso [oyeanuj](https://github.com/oyeanuj), [mtlewis](https://github.com/mtlewis) and [hu9o](https://github.com/hu9o) and all other awesome people contributing to this in any way.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmosch%2Freact-avatar-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmosch%2Freact-avatar-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmosch%2Freact-avatar-editor/lists"}