canvas_cropjs

cropjs

A cropper base on mobile.Use canvas show and crop.

example

example at https://cexoso.github.io/cropjs. Use mobile visit will be better.

api

get instance

import Crop from 'canvas_cropjs'
const crop = new Crop(ele, opt);

ele: string or DOM. The container crop will be in. If string is receipted, document.querySelector will be called to get a DOM.

opts:

• cropOpts

{
    border: 1.3, // border aspect ratio
    left: 0.5, // 50%
    size: 0.6, // size of border box，Relative to width of canvas.
    top: 0.3, // 30%
}
statusOpts: {
        zoom: true
    },
    result: {
        type: 'base64',
        mimeType: '',
        quality: 1
    }

• statusOpts

{
    zoom: true // Add clickable Element for scaling .
}

• result

{
    type: 'base64' | 'blob' | 'all', // export base64,blob, of all of they.
    mimeType: 'image/png' | 'image/jpeg', // The mimeType of export blob
    quality: 1 // 0~1 quality
}

add eventListener

crop.addEventListener('crop', onCrop);
// cancel and crop can be Listened.

set img

set img to crop

const img = new Image();
img.src = URL.createObjectURL(file);
crop.setImg(Img);

reset

reset crop for next crop.

crop.reset();

show hide

show or hide the crop.

crop.show()
crop.hide()

development

1. run yarn or npm i to install Dependencies
2. run yarn start or npm start to open development environment.

depoly

The example folder includes exmaple source. And run yarn deploy will deploy example to homepage(https://cexoso.github.io/cropjs/).