Cropperjs使用 前端图像裁剪

下载引入

npm install cropperjs
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

如果是基于服务端的裁切，则使用：getData 方法，该方法得到裁切的区域参数然后传给服务端。

this.myCropper.getData()

如果是纯客户端的图片裁切，则使用：getCroppedCanvas 方法，该方法得到裁切之后的图片对象（类似于URL.createObjectURL 方法得到的文件对象）。

this.myCropper.getCroppedCanvas()

配置项        new Cropper（ 操作对象，{ 配置项 } )

const image = this.$refs.image; //获取图片元素this.myCropper = new Cropper(image, {preview: '.afterCropper', // 拖动裁剪框预览视图 viewMode: 1, //裁切框的位置，0可以选择图片外，1只能在图片内dragMode: "move", //拖动方式，crop、move、noneaspectRatio: 0/0, //截取的比例  0/0设置关闭等比例缩放 可以使用setAspectRatio方法重新设置宽高比 autoCropArea: 0.8, //撑满画布cropBoxMovable: true, //截取框移动功能corpBoxResizable: true, //截取框缩放功能background: true, //背景movable: true, //画布是否可以移动});      

下面是个demo  效果图和代码附上

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！