Vue图片裁剪插件vue-cropper的使用，应用场景用户上传头像

---

前言

一个简单的用户上传头像的例子
功能：选择图片，设置裁剪位置，实时预览

---

一、安装和引入

安装

//npm安装
npm install vue-cropper

引入

<script>
  import { VueCropper }  from 'vue-cropper' 
  export default {
    components: { VueCropper }
  }
</script>

二、Events And Methods

Events

事件名	说明	参数
realTime	实时预览	{ url, h, w, img, div, html }

Methods
通过 this.$refs.cropper 调用

方法名	说明	参数
getCropData	获取截图的 base64 数据	date
getCropBlob	获取截图的 blob 数据	date
rotateRight	向右旋转90度	-
rotateLeft	向左旋转90度	-
changeScale	图片缩放(正数变大 负数变小)	-

组件更多的属性和方法见文档 vue-cropper

三、简单使用

简单使用，部分代码

  <el-row>
    <el-col :span="12">
      <div style="width: 760px;height: 480px">
	    <vueCropper @realTime="realTime" :img="option.img" :autoCrop="option.autoCrop" />
      </div>
    </el-col>
    <el-col :span="6">
      <div>实时预览图</div>
      <div :style="previewStyle">
        <div :style="previews.div">
          <img :src="previews.url" :style="previews.img">
        </div>
      </div>
    </el-col>
  </el-row>

  data() {
  	return {
      previews: {},
      previewStyle: {},
      option: {
        img: require("../assets/img/huihui.png"), // 裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框  (默认:false)
      },
     };
   },
   methods: {
     // 实时预览
     realTime(date) {
       console.log(date)
      // {
      //   url: "blob:http://localhost:8080/e82d8987-41f1-40d0-9b86-25d3d7caecc8",
      //   h: 341,
      //   w: 358,
      //   div: {
      //     height: "341px",
      //     width: "358px"
      //   },
      //   img: {
      //     height: "1200px",
      //     transform: "scale(0.3958333333333333)translate3d(-1657.2631578947369px, -1030.7368421052631px, 0px)rotateZ(0deg)",
      //     width: "1920px"
      //   }
      //   html: ...
      // }
      this.previewStyle = {
        width: data.w + "px",
        height: data.h + "px",
        overflow: "hidden",
        margin: "0",
      }
      this.previews = data
     },
   }

效果图

四、实际应用（含本地图片下载）

全部代码

<template>
  <div class="main">
    <el-row>
      <el-col :span="12">
        <div style="width: 760px;height: 480px">
          <vueCropper ref="cropper" @realTime="realTime" :img="option.img" :outputSize="option.outputSize" :full="option.full" :canMove="option.canMove"
            :canMoveBox="option.canMoveBox" :centerBox="option.centerBox" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" :fixed="option.fixed" :fixedNumber="option.fixedNumber"
            :outputType="option.outputType" />
        </div>
        <div class="mt10">
          <el-upload class="mb10" action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small"> 选择图片 <i class="el-icon-upload"></i> </el-button>
          </el-upload>
          <el-button icon="el-icon-crop" size="small" @click="finish">确定</el-button>
          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <div>实时预览图</div>
        <div :style="previewStyle">
          <div :style="previews.div">
            <img :src="previews.url" :style="previews.img">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'

export default {
  components: { VueCropper },
  data() {
    return {
      previews: {},
      previewStyle: {},
      option: {
        img: require("../assets/img/huihui.png"), // 裁剪图片的地址
        autoCrop: true, // 是否默认生成截图框  (默认:false)
        outputSize: 1, // 裁剪生成图片的质量  (默认:1)
        full: false, // 是否输出原图比例的截图 选true生成的图片会非常大  (默认:false)
        canMove: true, // 上传图片是否可以移动  (默认:true)
        // canMoveBox: false, // 截图框能否拖动  (默认:true)
        centerBox: true,//截图框是否被限制在图片里面  (默认:false)
        autoCropWidth: 200, // 默认生成截图框宽度  (默认:80%)
        autoCropHeight: 200, // 默认生成截图框高度  (默认:80%)
        fixedBox: true, // 固定截图框大小 不允许改变  (默认:false)
        fixed: true,//是否开启截图框宽高固定比例  (默认:false)
        // fixedNumber: [2, 1],//截图框宽高比例  [宽,高](默认[1:1])
        outputType: 'png' // 裁剪生成图片的格式 可选值 jpeg, png, webp
      },
    };
  },
  methods: {
  	// 覆盖默认的上传行为
    requestUpload() {
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$message.error("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.option.img = reader.result;
        };
      }
    },
    realTime(data) {  //实时预览
      this.previewStyle = {
        width: data.w + "px",
        height: data.h + "px",
        overflow: "hidden",
        margin: "0",
        borderRadius: "50%",
      }
      this.previews = data
    },
    finish() {  // 下载/上传 预览图
      let fileName = '裁剪图'
      this.$refs.cropper.getCropBlob((data) => { //获取截图的 blob 数据
        // 上传图片
        // this.uploadImg(data, fileName)

        // 下载图片
        let url = window.URL.createObjectURL(data)
        this.downloadIamge1(url, fileName)  //本地下载方法1
        // this.downloadIamge2(url, fileName)  //本地下载方法2
      });
      // this.$refs.cropper.getCropData(url => {  //获取截图的 base64 数据
      //   this.downloadIamge1(url, fileName)  //本地下载方法1
      //   // this.downloadIamge2(url, fileName)  //本地下载方法2
      // })
    },
    // 上传图片
    uploadImg(data, fileName) {
      let formData = new FormData();
      formData.append('file', data, fileName);
      // 上传到服务器
      // uploadAvatar(formData).then(rse => { })
    },
    downloadIamge1(url, fileName) {  // 下载图片
      let link = document.createElement('a')
      link.style.display = 'none'
      link.setAttribute('href', url)
      link.setAttribute('download', fileName)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link) //下载完成移除元素
      window.URL.revokeObjectURL(url) //释放掉blob对象
    },
    downloadIamge2(imgsrc, fileName) {//下载图片
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.href = url; // 将生成的URL设置为a.href属性
        a.download = fileName; // 设置图片名称
        a.dispatchEvent(event); // 触发a的单击事件
        window.URL.revokeObjectURL(imgsrc) //释放掉blob对象
      };
      image.src = imgsrc;
    },
    // 向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 图片缩放
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
  },
};
</script>

<style>
.main {
  position: relative;
}
</style>

效果图