React Crop Center Image

English｜繁體中文

Automatically crop the image to a specific range, scale to fit the main axis, and delete the secondary axis if overflow.

Install

$ npm i react-crop-center-image

Import

import CropImage from 'react-crop-center-image'

Upload image example

import CropImage from 'react-crop-center-image'
import React, { useState } from 'react'

function Example() {
  const [src, setSrc] = useState()
  const upload = (e) => {
    const file = e.target.files[0]
    if (file) {
      const fr = new FileReader()
      fr.onload = (e) => {
        setSrc(e.target.result)
      }
      fr.readAsDataURL(file)
    }
  }

  return (
    <div>
      <input type="file" onChange={upload} />
      <CropImage
        axis="y"
        width={350}
        height={500}
        src={src}
        className="border"
      />
    </div>
  )
}

export default Example

CropImage component available properties:

property	description
width	Width
height	Height
src	Image source
axis	Set the main axis, the image will be scaled to fit the main axis.
ref	Same as React ref, could get the canvas ref.
autofill	When secondary axis has remaining space, whether fill white background.
{other}	Other properties will automatically forward, such as className.

CropImage component available events:

event	description
onDrawEnd(ctx)	callback after drawing the image