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
- run
yarnornpm ito install Dependencies - run
yarn startornpm startto open development environment.
depoly
The example folder includes exmaple source. And run yarn deploy will deploy example to homepage(https://cexoso.github.io/cropjs/).