vue-cropper

一个优雅的图片裁剪插件

[ 查看演示 Demo ]
[ README_english ]
[ 更新日志 ]

一、安装使用

1. 安装

# npm 安装
npm install vue-cropper

2. 引入 Vue Cropper

Vue2 组件内引入

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}

Vue2 全局引入

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

3. 代码中使用

重要！ 需要关掉本地的 mock 服务， 不然图片转化会报错 重要！ 需要使用外层容器包裹并设置宽高

<vueCropper
  ref="cropper"
  :img="option.img"
  :outputSize="option.size"
  :outputType="option.outputType"
></vueCropper>

二、文档

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 something
  console.log(data)  
})

获取截图的 blob 数据

this.$refs.cropper.getCropBlob(data => {
  // do something
  console.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(); //停止裁剪
    },

需要注意的点

1. 尺寸限制如下，必须设置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);
   

2. 输出尺寸固定时 full属性需设为false

3. 在做图片大小限制时发现，图片经过裁剪后输出会自动压缩，即使没有裁剪尺寸。如需做尺寸的判断，应放在裁剪后

   		const size = file.size / 1024 / 1024 < 2;
           if (!size) {
             Message.error('图片大小超过2M！');
             return;
           }