vue2上传图片裁剪功能

一、效果展示

二、代码编写

代码总共分为4个部分

1、安装插件

npm install vue-cropper

        引入：在main.js中引入

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

2、template代码块

<!--上传代码的组件 去elementui中找自己想要的-->
<!--裁剪功能-->
   <div style="height: 300px ;width:500px;">
      <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.outputSize"
            :outputType="option.outputType"
            :info="option.info"
            :canScale="option.canScale"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :full="option.full"
            :fixedBox="option.fixedBox"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :centerBox="option.centerBox"
            :height="option.height"
            :infoTrue="option.infoTrue"
            :maxImgSize="option.maxImgSize"
            :enlarge="option.enlarge"
            :mode="option.mode"
            @realTime="realTime"
      ></vueCropper>
    </div>
    <!-- 功能区裁剪 -->
    <div>
      <el-button size="mini" type="danger" plain icon="el-icon-zoom-in" @click="changeScale(1)">放大</el-button>
          <el-button size="mini" type="danger" plain icon="el-icon-zoom-out" @click="changeScale(-1)">缩小</el-button>
          <el-button size="mini" type="danger" plain @click="rotateLeft">↺ 左旋转</el-button>
          <el-button size="mini" type="danger" plain @click="rotateRight">↻ 右旋转</el-button>
    </div>
    <el-button size="mini" type="danger" plain @click="uploadImg()">提交</el-button>
    <!--预览效果图-->
    <div class="show-preview">
      <div :style="previews.div" style="overflow: hidden;">
        <img :src="previews.url" :style="previews.img">
      </div>
    </div>

3、data区

   previews: {},
   option:{
      img: '',             //裁剪图片的地址
      outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
      outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
      info: true,          //图片大小信息
      canScale: true,      //图片是否允许滚轮缩放
      autoCrop: true,      //是否默认生成截图框
      autoCropWidth: 230,  //默认生成截图框宽度
      autoCropHeight: 150, //默认生成截图框高度
      fixed: false,         //是否开启截图框宽高固定比例
      fixedNumber: [1.53, 1], //截图框的宽高比例
      full: false,         //false按原比例裁切图片，不失真
      fixedBox: false,      //固定截图框大小，不允许改变
      canMove: false,      //上传图片是否可以移动
      canMoveBox: true,    //截图框能否拖动
      original: false,     //上传图片按照原始比例渲染
      centerBox: false,    //截图框是否被限制在图片里面
      height: true,        //是否按照设备的dpr 输出等比例图片
      infoTrue: false,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
      maxImgSize: 3000,    //限制图片最大宽度和高度
      enlarge: 1,          //图片根据截图框输出比例倍数
      mode: '230px 150px'  //图片默认渲染方式
   },

4、methods方法

   //实时预览函数
    realTime (data) {
      this.previews = data
    },
    //图片缩放
    changeScale (num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    //向左旋转
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    //向右旋转
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    //上传图片
    uploadImg(){
        //获取截图的blob数据
        this.$refs.cropper.getCropBlob(async (data) => {
          console.log(data)
          //拿到的是blob类型的数据，需要其他形式需要转换
          let formData = new FormData();
          formData.append('file',data,"DX.jpg")
          //调用axios上传
          //上传逻辑
          axios({
             url: "你自己的上传图片路径",
             method: 'post',
             data: formData,
             headers: { 'Content-Type': 'multipart/form-data' }
           }).then(res => {
	       //添加到数据库时添加的是裁剪过的图片
               this.form.pic=res.data;
               this.$message({
                 message: '裁剪成功',
                 type: 'success'
               });
           })
        })
    },