vue 图片裁剪

官方文档传送门

效果图

参数备注

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址 || base64 || blob
outputSize	裁剪生成图片的质量	1	0.1 - 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
info	裁剪框的大小信息	true	true || false
canScale	图片是否允许滚轮缩放	true	true \
autoCrop	是否默认生成截图框	false	true || false
autoCropWidth	默认生成截图框宽度	容器的80%	0~max
autoCropHeight	默认生成截图框高度	容器的80%	0~max
fixed	是否开启截图框宽高固定比例	true	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

内置方法

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度
图片加载的回调 imgLoad 返回结果success, error

获取截图信息

this.$refs.cropper.cropW 截图框宽度
this.$refs.cropper.cropH 截图框高度

// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})
// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})

说完了参数和方法，现在实战

1. 安装

   npm install vue-cropper
   

2. 全局注册 （在main.js 引入）

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

3. 在当前页面使用

<template>
 <div>
  <vueCropper
   ref="cropper"
      :img="option.img"
      :outputSize="option.size"
      :outputType="option.outputType"
      :info="true"
      :full="option.full"
      :canMove="option.canMove"
      :canMoveBox="option.canMoveBox"
      :original="option.original"
      :autoCrop="option.autoCrop"
      :fixed="option.fixed"
      :fixedNumber="option.fixedNumber"
      :centerBox="option.centerBox"
      :infoTrue="option.infoTrue"
      :fixedBox="option.fixedBox"
    ></vueCropper>
 </div>
</template>

<style scoped lang='less' rel='stylesheet/less'>
  // 这个样式 一定不能少
  .cropper-content {
    .cropper {
      width: auto;
      height: 500px;
    }
  }
</style>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        option: {
          img: '', // 裁剪图片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 1, // 裁剪生成图片的质量
          outputType: 'jpeg', // 裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          // autoCropWidth: 300, // 默认生成截图框宽度
          // autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: false, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [16, 10], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMoveBox: true, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        }
      };
    },
    methods: {
      /*文件 转 b64*/
      blobToDataURL(blob, callback) {
        let a = new FileReader();
        a.onload = function (e) { callback(e.target.result); }
        a.readAsDataURL(blob);
      },
      /*Blob 转 文件 */
      blobToFile (theBlob, fileName){
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
      },
      // 初始 传 file 和 回调函数
      show(file, callback) {
        this.callback = callback
        this.fileinfo = file
        this.blobToDataURL(file, (result) => {
          this.$nextTick(() => {
            this.option.img = result
          })
        })
      },
      // 获取裁剪内容
      finish() {
        this.$refs.cropper.getCropBlob((data) => {
          var fileName = 'goods' + this.fileinfo.uid
          this.dialogVisible = false
          console.log(this.blobToFile(data, fileName))
          this.callback(this.blobToFile(data, fileName))
        })
      }
    }
}

</script>