VUE图片裁剪工具VueCropper的使用方法

安装依赖

npm install vue-cropper --save-dev

前端代码

注意： 前端我是使用了VUE+IVIEW，有些标签可能需要先引入iview才不会报错，例如Row 和Col

<template>
  <div id="imageCropper">
    <Row class="mt-2">
      <Col>
        <Button type="default" @click="changeScale(1)" ghost><i class="el-icon-zoom-in"></i>放大</Button>
        <Button type="default" @click="changeScale(-1)" ghost><i class="el-icon-zoom-out"></i>缩小</Button>
        <Button type="default" @click="rotateLeft" ghost icon="ios-return-left">左旋转</Button>
        <Button type="default" @click="rotateRight" ghost icon="ios-return-right">右旋转</Button>
        <label class="ivu-btn ivu-btn-primary" for="uploads">选择图片</label>
        <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg"
               @change="uploadImg($event, 1)">
        <Button type="success" @click="uploadHeaderPic">上传到服务器</Button>
      </Col>
    </Row>
    <Row class="mt-3">
      <Col :lg="12" :md="12">
        <div>
          <div style="width: 336px;height: 336px">
            <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"
              :autoCropWidth="option.autoCropWidth"
              :autoCropHeight="option.autoCropHeight"
              :fixedBox="option.fixedBox"
              @realTime="realTime"
              @imgLoad="imgLoad"
            ></VueCropper>
          </div>
        </div>
      </Col>
      <Col :lg="12" :md="12">
        <div style="margin-left:20px;">
          <div :style="previews.div" class="ui medium circular image">
            <img :src="previews.url" :style="previews.img">
          </div>
        </div>
      </Col>
    </Row>
    <Row class="mt-3">
      <Col :lg="24" :md="24">
        <el-input v-model="userDiyPicUrl" placeholder="自定义头像地址" ></el-input>
      </Col>
    </Row>

  </div>
</template>

脚本

<script>
  import FILE_API from  '../../api/api_file'
  import axios from "axios";
  export default {
    name: "imageCropper",
    data(){
      return {
        // 用户自定义头像地址
        userDiyPicUrl:'',
        headImg:'',
        //剪切图片上传
        crap: false,
        previews: {
          url:''
        },
        option:{
          img: '',
          size: 1,
          full: false,
          outputType: 'png',
          canMove: true,
          fixedBox: true,
          original: false,
          canMoveBox: true,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 120,
          autoCropHeight: 120,
          centerBox: false,
          high: true
        },
        fileName:'',  //本机文件地址
        downImg: '#',
        imgFile:'',
        uploadImgRelaPath:'', //上传后的图片的地址（不带服务器域名）
      }
    },
    methods:{
      // 实时预览函数
      realTime(data) {
        this.previews = data
      },
      //坐旋转
      rotateLeft() {
        this.$refs.cropper.rotateLeft();
      },
      //右旋转
      rotateRight() {
        this.$refs.cropper.rotateRight();
      },
      imgLoad (msg) {
      },
      //放大/缩小
      changeScale(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },
      //上传图片
      uploadImg(e, num) {
        let $this = this;
        // this.option.img
        let file = e.target.files[0]
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
          return false
        }
        $this.fileName = file.name;
        let reader = new FileReader()
        reader.onload = (e) => {
          let data
          if (typeof e.target.result === 'object') {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]))
          } else {
            data = e.target.result
          }
          $this.option.img = data
        }
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file)
      },
      uploadHeaderPic(){
        let $this = this;
        $this.$refs.cropper.getCropBlob((data) => {
          let formData = new FormData();
          let img = window.URL.createObjectURL(data);
          console.log("上传文件名："+this.fileName);
          formData.append("file", data, this.fileName);
          axios({
            url: FILE_API.getImgUploadUrl(),
            method: 'post',
            data: formData,
            headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' },
          }).then((jsonData) => {
            console.log("图片上传结果："+JSON.stringify(jsonData.data));
            let fileUrl = jsonData.data.fileUrl;
            $this.userDiyPicUrl = fileUrl;
          });
        });


      }
    },
    mounted() {

    }
  }
</script>

css样式

 <style scoped>
  .info {
    width: 720px;
    margin: 0 auto;
  }
  .oper-dv {
    height:20px;
    text-align:right;
    margin-right:100px;
  }

  .cropper-content{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
  .cropper{
    width: 360px;
    height: 360px;
  }
  .btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c0ccda;
    color: #1f2d3d;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin:20px 10px 0px 0px;
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #50bfff;
    border-color: #50bfff;
    transition: all .2s ease;
    text-decoration: none;
    user-select: none;
  }
</style>

效果

上传成功后：

图片预览