图片裁剪草稿

<template>
  <div>
    <div style="text-align: center">
      <img style="border-radius: 50%" width="120px" :src="avatarURL" />
      <el-button type="text" @click="editAvatar">修改头像</el-button>
    </div>

    <el-dialog title="修改头像" :visible.sync="editAvatarDialog" width="40%">
      <el-row type="flex" justify="center">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="option.info"
            :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"
          ></vueCropper>
        </div>
        <div class="previewBox">
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
          <el-row type="flex" justify="center">
            <el-upload
              action=""
              :show-file-list="false"
              :auto-upload="false"
              :on-change="uploadImg"
              :http-request="uploadFile"
            >
              <el-button size="mini" type="primary"> 更换头像 </el-button>
            </el-upload>
          </el-row>
          <br />
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editAvatarDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveEditAvatar">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import fileService from '@/api/cloud/imgfile';
import axios from 'axios';
import { VueCropper } from 'vue-cropper';
export default {
  data() {
    return {
      avatarURL: require('@/assets/编组1.png'),
      editAvatarDialog: false,
      previews: {},
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        full: true, // 输出原图比例截图 props名full
        outputType: 'png', // 裁剪生成额图片的格式
        canMove: true, // 能否拖动图片
        original: false, // 上传图片是否显示原始宽高
        canMoveBox: true, // 能否拖动截图框
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true // 截图框固定大小
      }
    };
  },
  components: { VueCropper },
  methods: {
    uploadFile(res) {
      fileService.elUploadProcess(res).then(path => {
        if (path !== null) {
          // this.role.imgUrl = path;
          // this.$refs.roleForm.clearValidate(['imgUrl']);
        } else {
          // this.fileList = this.fileList.filter(
          //   item => item.uid != res.file.uid
          // );
          this.fileList = [];
        }
      });
    },
    editAvatar() {
      this.editAvatarDialog = true;
      this.option.img = this.avatarURL;
    },
    // 保存头像修改
    saveEditAvatar() {
      this.editAvatarDialog = false;
      this.finish('blob');
      // this.uploadFile();
    },

    // 保存上传图片
    finish(type) {
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob(data => {
          this.avatarURL = window.URL.createObjectURL(data);
          //访问接口保存到数据库写这儿!
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          //访问接口保存到数据库写这儿!
        });
      }
    },
    // 实时预览函数
    realTime(data) {
      this.previews = data;
    },

    // 更换头像--上传本地图片
    uploadImg(file) {
      var _this = this;
      var 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.raw)
      // 转化为blob
      reader.readAsArrayBuffer(file.raw);
    }
  }
};
</script>
<style lang="scss">
.previewBox {
  text-align: center;
  margin-left: 60px;
}

.preview {
  width: 150px;
  height: 150px;
  margin: 0px auto 20px auto;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #ccc;
  overflow: hidden;
}

.cropper {
  width: 260px;
  height: 260px;
}
</style>