vue-cropper实战使用
vue-cropper
一个优雅的图片裁剪插件
[ 查看演示 Demo ]
[ README_english ]
[ 更新日志 ]
一、安装使用
1. 安装
# npm 安装
npm install vue-cropper2. 引入 Vue Cropper
Vue2 组件内引入
import { VueCropper } from 'vue-cropper'
components: {VueCropper
}Vue2 全局引入
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)3. 代码中使用
重要！ 需要关掉本地的 mock 服务， 不然图片转化会报错 重要！ 需要使用外层容器包裹并设置宽高
二、文档
1. props
| 名称 | 功能 | 默认值 | 可选值 | |
|---|---|---|---|---|
| img | 裁剪图片的地址 | 空 | url 地址, base64, blob | |
| outputSize | 裁剪生成图片的质量 | 1 | 0.1 ~ 1 | |
| outputType | 裁剪生成图片的格式 | jpg (jpg 需要传入jpeg) | jpeg, png, webp | |
| info | 裁剪框的大小信息 | true | true, false | |
| canScale | 图片是否允许滚轮缩放 | true | true, false | |
| autoCrop | 是否默认生成截图框 | false | true, false | |
| autoCropWidth | 默认生成截图框宽度 | 容器的 80% | 0 ~ max | |
| autoCropHeight | 默认生成截图框高度 | 容器的 80% | 0 ~ max | |
| fixed | 是否开启截图框宽高固定比例 | false | true, false | |
| fixedNumber | 截图框的宽高比例 | [1, 1] | [ 宽度 , 高度 ] | |
| full | 是否输出原图比例的截图 | false | true, false | |
| fixedBox | 固定截图框大小 | 不允许改变 | false | true, false |
| canMove | 上传图片是否可以移动 | true | true, false | |
| canMoveBox | 截图框能否拖动 | true | true, false | |
| original | 上传图片按照原始比例渲染 | false | true, false | |
| centerBox | 截图框是否被限制在图片里面 | false | true, false | |
| high | 是否按照设备的dpr 输出等比例图片 | true | true, false | |
| infoTrue | true 为展示真实输出图片宽高 false 展示看到的截图框宽高 | false | true, false | |
| maxImgSize | 限制图片最大宽度和高度 | 2000 | 0 ~ max | |
| enlarge | 图片根据截图框输出比例倍数 | 1 | 0 ~ max(建议不要太大不然会卡死的呢) | |
| mode | 图片默认渲染方式 | contain | contain , cover, 100px, 100% auto |
2. 内置方法 和 属性
通过 this.$refs.cropper 调用
属性
| 属性 | 说明 |
|---|---|
| this.$refs.cropper.cropW | 截图框宽度 |
| this.$refs.cropper.cropH | 截图框高度 |
方法
| 方法 | 说明 |
|---|---|
| this.$refs.cropper.startCrop() | 开始截图 |
| this.$refs.cropper.stopCrop() | 停止截图 |
| this.$refs.cropper.clearCrop() | 清除截图 |
| this.$refs.cropper.changeScale() | 修改图片大小 正数为变大 负数变小 |
| this.$refs.cropper.getImgAxis() | 获取图片基于容器的坐标点 |
| this.$refs.cropper.getCropAxis() | 获取截图框基于容器的坐标点 |
| this.$refs.cropper.goAutoCrop | 自动生成截图框函数 |
| this.$refs.cropper.rotateRight() | 向右边旋转90度 |
| this.$refs.cropper.rotateLeft() | 向左边旋转90度 |
获取截图内容
获取截图的 base64 数据
this.$refs.cropper.getCropData(data => {// do somethingconsole.log(data)
})获取截图的 blob 数据
this.$refs.cropper.getCropBlob(data => {// do somethingconsole.log(data)
})
三、项目中使用
<vueCropper@mouseenter.native="enter"@mouseleave.native="leave"ref="cropper":img="dialogImageUrl":outputSize="option.size":outputType="option.outputType":fixed="option.fixed":info="option.info":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":fixedNumber="option.fixedNumber":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox"style="background-image:none"></vueCropper>enter() {if (this.dialogImageUrl == '') {return;}this.$refs.cropper.startCrop(); //开始裁剪},leave() {this.$refs.cropper.stopCrop(); //停止裁剪},
需要注意的点
-
尺寸限制如下，必须设置enlarge属性，否则限制不生效
// 尺寸限制const _this = this;let valid = null;const width = 240;const height = 240;const _URL = window.URL || window.webkitURL;const img = new Image();img.onload = function() {valid = img.width === width && img.height === height;if (valid) {_this.uploadImg(file);} else {this.dialogImageUrl = '';Message.error('图片尺寸限制为240*240');}};img.src = _URL.createObjectURL(file); -
输出尺寸固定时 full属性需设为false
-
在做图片大小限制时发现，图片经过裁剪后输出会自动压缩，即使没有裁剪尺寸。如需做尺寸的判断，应放在裁剪后
const size = file.size / 1024 / 1024 < 2;if (!size) {Message.error('图片大小超过2M！');return;}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！