Image cropper

Example

Upload

import { ImageCropper } from "@happeokit/image-cropper";

render() {
    return (
        <ImageCropper
            url={this.state.url}
            viewport={{
              width: 200,
              height: 200,
              isCircle: true
            }}
        />
    )
}

Getting the result

Emit an event called 'getResult' using the cropperEvent from the package to trigger the result from the cropper. Simply pass a callback to onSave to get the result.

import { cropperEvent } from "@happeokit/image-cropper";

onSave = resultData => {
    this.closeModal();
    this.setState({ imageSrc: resultData });
};

getResult = () => {
    cropperEvent.emit('getResult');
}

Properties

boundary

The outer container of the cropper.

viewport

The inner container of the coppie. The visible part of the image. You can either set fixed width and height, or specify the aspectRatio with one of the dimensions. isCircle property accepts boolean value, and can be omitted.

viewport={{
    aspectRatio: {{ w: 4, h: 3}},
    width: 200,
}}

result

Configuration for the resulting crop of the image.

• type: The type of result to return defaults to 'canvas'. Valid values are 'base64', 'html', 'blob' and 'rawcanvas'.
• size: The size of the cropped image defaults to 'viewport'. Other values are 'original' or { width, height } object. If only one dimension is specified, the other will be calculated using the viewport aspect ratio.
• format: Indicating the image format. 'png', 'jpeg' or 'webp'.
• quality: Number between 0 and 1 indicating image quality.
  
  

enableResize

Enable or disable support for resizing the viewport area.

mouseWheelZoom

Enable or disable the ability to use the mouse wheel to zoom in and out on a croppie instance. If 'ctrl' is passed mouse wheel will only work while control keyboard is pressed

onSave

Callback excuted when getting the result. Receive data of the resulting image as the parameter.