npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

react-avatar-editor

v11.0.7

Published

Avatar / profile picture component. Resize and crop your uploaded image using a intuitive user interface.

Downloads

166,612

Readme

react-avatar-editor

npm version Downloads Build Status

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

Install

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

yarn add react-avatar-editor

respective

npm install --save react-avatar-editor

Demo

Demo

Usage

import React from 'react'
import AvatarEditor from 'react-avatar-editor'

class MyEditor extends React.Component {
  render() {
    return (
      <AvatarEditor
        image="http://example.com/initialimage.jpg"
        width={250}
        height={250}
        border={50}
        color={[255, 255, 255, 0.6]} // RGBA
        scale={1.2}
        rotate={0}
      />
    )
  }
}

export default MyEditor

Props

PropTypeDescription
imageString|FileThe URL of the image to use, or a File (e.g. from a file input).
widthNumberThe total width of the editor.
heightNumberThe total height of the editor.
borderNumber|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.
borderRadiusNumberThe cropping area border radius.
colorNumber[]The color of the cropping border, in the form: red (0-255), green (0-255), blue (0-255), alpha (0.0-1.0).
styleObjectStyles for the canvas element.
scaleNumberThe scale of the image. You can use this to add your own resizing slider.
positionObjectThe 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.
rotateNumberThe rotation degree of the image. You can use this to rotate image (e.g 90, 270 degrees).
crossOriginStringThe 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.
classNameString|String[]className property passed to the canvas element
onLoadFailure(event)functionInvoked when an image (whether passed by props or dropped) load fails.
onLoadSuccess(imgInfo)functionInvoked when an image (whether passed by props or dropped) load succeeds.
onImageReady(event)functionInvoked when the image is painted on the canvas the first time.
onMouseUp()functionInvoked when the user releases their mouse button after interacting with the editor.
onMouseMove(event)functionInvoked when the user hold and moving the image.
onImageChange()functionInvoked when the user changed the image. Not invoked on the first render, and invoked multiple times during drag, etc.
onPositionChange()functionInvoked 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.
disableBoundaryChecksBooleanSet to true to allow the image to be moved outside the cropping boundary.
disableHiDPIScalingBooleanSet 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.

import React from 'react'
import AvatarEditor from 'react-avatar-editor'

const MyEditor extends React.Component {
  onClickSave = () => {
    if (this.editor) {
      // This returns a HTMLCanvasElement, it can be made into a data URL or a blob,
      // drawn on another canvas, or added to the DOM.
      const canvas = this.editor.getImage()

      // If you want the image resized to the canvas size (also a HTMLCanvasElement)
      const canvasScaled = this.editor.getImageScaledToCanvas()
    }
  }

  setEditorRef = (editor) => this.editor = editor

  render () {
    return (
        <AvatarEditor
          ref={this.setEditorRef}
          image="http://example.com/initialimage.jpg"
          width={250}
          height={250}
          border={50}
          scale={1.2}
        />
    )
  }
}

export default MyEditor

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:

class MyEditor extends React.Component {
  handleDrop = dropped => {
    this.setState({ image: dropped[0] })
  }
  render() {
    return (
      <Dropzone
        onDrop={this.handleDrop}
        disableClick
        style={{ width: '250px', height: '250px' }}
      >
        <ReactAvatarEditor width={250} height={250} image={this.state.image} />
      </Dropzone>
    )
  }
}

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.

const canvas = this.editor.getImage().toDataURL();
let imageURL;
fetch(canvas)
  .then(res => res.blob())
  .then(blob => (imageURL = window.URL.createObjectURL(blob)));

// Usage
<img src={imageURL} ... />

Contributing

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

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.