JavaScript image cropper based on canvas
npm install canvas-image-cropper
<div id="container"></div>
var canvasImageCropper = new CanvasImageCropper({
canvasWidth: 500,
canvasHeight: 500,
maskStyle: 'rgba(0, 0, 0, .6)',
clipWidth: 200,
clipHeight: 200
});
canvasImageCropper.render(document.getElementById('container'), './foo.jpg');
canvasWidth -- canvas 的大小 图片绘制宽度不会超过这个值
canvasHeight -- canvas 的大小 图片绘制高度不会超过这个值
maskStyle -- 遮罩样式
clipWidth -- 裁剪像素大小
clipHeight -- 裁剪像素大小
- 获取裁剪坐标
canvasImageCropper.getClipPosition()
{ x: 0, y: 0, width: 200, height: 200 }
- 获取裁剪区 base64 数据
canvasImageCropper.getPreview()