hq-cropper

Cropper for large images

Demo

Installation

npm install hq-cropper

Usage Example

import { HqCropper } from 'hq-cropper'

function handleCrop(base64: string, blob: Blob | null) {
    document.querySelector('img#image-preview').setAttribute('src', base64)
}

const hqCropper = HqCropper(handleCrop)

document.querySelector('button#change-image-button')
    .addEventListener('click', hqCropper.open, false)

React usage

import { useMemo } from 'react'
import { HqCropper } from 'hq-cropper'

function MyComponent() {
    const [image, setImage] = useState('')

    /* Important: must be memoized */
    const { current: hqCropper } = useRef(HqCropper(setImage))

    return (
        <div>
            <img src={image} />
            <button onClick={hqCropper.open}>change</button>
        </div>
    )
}

Configuration

HqCropper can be initialized with config and css objects.

export type HqCropperType = (
    onSubmit: (result: string, state: IState) => void,
    config?: Partial<IConfig>,
    css?: Partial<IClassNames>
) => HqCropperInstance