1.0.2 • Published 3 years ago

react-photo-scissor v1.0.2

Weekly downloads
2
License
MIT
Repository
github
Last release
3 years ago

react-photo-scissor

A React photo scissor!

NPM JavaScript Style Guide

Install

npm install --save react-photo-scissor

Usage

import React from 'react'
import image from './629.jpg'

import PhotoScissor from 'react-photo-scissor'
import 'react-photo-scissor/dist/index.css'

const App = () => {
  const scissorRef = React.createRef()

  function onCrop() {
    scissorRef.current.crop().then(result => {
      console.log(result)
    })
  }

  return (
    <div>
      <PhotoScissor
        ref={scissorRef}
        image={image}
        viewportWidth={100}
        viewportHeight={100}
        boundaryWidth={200}
        boundaryHeight={200}
      />
      <button onClick={onCrop}>Crop</button>
    </div>
  )
}

Options

NameTypeDefaultRequired
imagestringtrue
viewportWidthnumber100
viewportHeightnumber100
boundaryWidthnumber200
boundaryHeightnumber200
showSliderbooltrue

Methods

function crop(type)

Result type default is blob, value can be 'canvas', 'base64', 'blob', 'html'

License

MIT © elliottspirit