Use Correction

High-level abstraction over use-cropper. With preview, animations and actually correcting images

Usage

All the cool stuff

Requires ChakraUI and opencv-tools

yarn add opencv-tools
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

npm add opencv-tools
npm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

import { useCorrection } from 'use-correction'
import Correction from 'use-correction/chakra'
import { useCorrectWorker } from 'use-correction/worker'

const api = useCorrectWorker(console.debug.bind(console))
const { correctionProps, actions, view } = useCorrection('/path/to/my-image.jpg', api)

async function correct() {
  const result = await actions.correct()
  // ...
}

return (
  <div>
    {/* ... */}
    <Correction {...correctionProps} />
    <button onClick={actions.preview}>Preview</button>
    <button onClick={actions.reset}>Reset corners</button>
    <button onClick={correct}>Correct image</button>
  </div>
)

Lower level usage

• Provide your own CorrectionAPI via a custom worker (e.g. using a custom, small OpenCV build)
• Don't use chakra:

  import { useCorrection } from 'use-correction'
    
  const { Correction, correctionProps, actions, view } = useCorrection('/path/to/my-image.jpg', myApi)
  // yep, Correction is just a shortcut to a normal, independent component
  
  return (
    <Correction {...correctionProps} />
  )