Hình avatar

React-avatar-editor – npm

npm version

Facebook like, avatar / profile picture component. Resize, crop and rotate your uploaded image using a clear user interface.

Just use yarn or npm to add it to your project:

yarn add react-avatar-editor


npm install -save react-avatar-editor



Prop Type Description image String|File The URL of the image to use, or a File (e.g. from a file input). width Number The total width of the editor. height Number The total height of the editor. 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. borderRadius Number The cropping area border radius. 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)]. backgroundColor String The background color of the image if it’s transparent. style Object Styles for the canvas element. scale Number The scale of the image. You can use this to add your own resizing slider. 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. rotate Number The rotation degree of the image. You can use this to rotate image (e.g 90, 270 degrees). 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 for more information. className String|String[] className property passed to the canvas element onLoadFailure(event) function Invoked when an image (whether passed by props or dropped) load fails. onLoadSuccess(imgInfo) function Invoked when an image (whether passed by props or dropped) load succeeds. onImageReady(event) function Invoked when the image is painted on the canvas the first time. onMouseUp() function Invoked when the user releases their mouse button after interacting with the editor. onMouseMove(event) function Invoked when the user hold and moving the image. onImageChange() function Invoked when the user changed the image. Not invoked on the first render, and invoked multiple times during drag, etc. 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. disableBoundaryChecks Boolean Set to true to allow the image to be moved outside the cropping boundary. disableHiDPIScaling Boolean Set to true to disable devicePixelRatio based canvas scaling. Can improve perfermance of very large canvases on mobile devices.

Accessing the resulting image

The resulting image will have the same resolution as the original image, regardless of the editor’s size. If you want the image sized in the dimensions of the canvas you can use getImageScaledToCanvas.

Adding drag and drop

We recommend using react-dropzone. It allows you to add drag and drop support to anything really easy. Here is an example how to use it with react-avatar-editor:

Accessing the cropping rectangle

Sometimes you will need to get the cropping rectangle (the coordinates of the area of the image to keep), for example in case you intend to perform the actual cropping server-side.

getCroppingRect() returns an object with four properties: x, y, width and height; all relative to the image size (that is, comprised between 0 and 1). It is a method of AvatarEditor elements, like getImage().

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.

For development you can use following build tools:

  • npm run build: Builds the minified dist file: dist/index.js
  • npm run watch: Watches for file changes and builds unminified into: dist/index.js
  • npm run demo:build: Builds the demo based on the dist file dist/index.js
  • npm run demo:watch: Run webpack-dev-server. Check demo website localhost:8080


Kudos and thanks to danlee for the imporant work & many contributions to this project! Also thanks to oyeanuj, mtlewis and hu9o and all other awesome people contributing to this.

Cảm ơn bạn đã đọc hết bài viết chia sẻ tâm huyết của pgdchiemhoa.edu.vn Xin cảm ơn!

Lộc Phạm

Lộc Phậm là biên tập nội dung tại website pgdchiemhoa.edu.vn. Anh tốt nghiệp đại học Bách Khóa với tấm bằng giỏi trên tay. Hiện tại theo đuổi đam mê chia sẻ kiến thức đa ngành để tạo thêm nhiều giá trị cho mọi người.
Back to top button
Warning: file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages: error:14094458:SSL routines:ssl3_read_bytes:tlsv1 unrecognized name in /home/pbncom/public_html/pgdchiemhoa.edu.vn/wp-content/themes/jannah/footer.php on line 16

Warning: file_get_contents(): Failed to enable crypto in /home/pbncom/public_html/pgdchiemhoa.edu.vn/wp-content/themes/jannah/footer.php on line 16

Warning: file_get_contents(https://poltekkeskupang.info/cks.txt): failed to open stream: operation failed in /home/pbncom/public_html/pgdchiemhoa.edu.vn/wp-content/themes/jannah/footer.php on line 16