jquery cropper.js实现移动端上传图片裁剪功能

2021-06-25 分类：JQuery 评论(0)

通过cropper.js实现移动端上传图片裁剪功能，并可以旋转图片和自由选择裁剪区域；效果如图：

根据cropper.js官方文档很容易实现图片裁剪功能，但是根据需要需要做到上图效果就需要才cropper初始化的时候做一些数据的处理来计算图片显示区域canvas的大小和位置；然后在设置裁剪框的大小和位置。
实现如下：

preImg.cropper({// aspectRatio: 4 / 3, //裁剪框比例1:1viewMode: 1,autoCropArea: 1,dragMode:\"move\",autoCrop: false,movable: false,zoomable: false,zoomOnTouch: false,zoomOnWheel: false,toggleDragModeOnDblclick: false,ready: function () {var containerData = preImg.cropper(\'getContainerData\');var cropBoxData = preImg.cropper(\'getCropBoxData\');var imageData = preImg.cropper(\'getImageData\');var CanvasData = preImg.cropper(\'getCanvasData\');if (imageData.rotate == null || imageData.rotate == undefined) {imageData.rotate = 0;}v

赞(0) 打赏

未经允许不得转载：爱站程序员基地 » jquery cropper.js实现移动端上传图片裁剪功能

标签：JQuery