图片裁剪--vue-cropper-（基于elementui）

一、安装依赖

cnpm install vue-cropper

二、main.js中引用

// 图片裁剪
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

三、引入elementui（可参考mosaic项目）

看引入elementui的文章

四、代码引入

<template>
  <div class="upImage">
    <el-button class="btn-upload" type="primary" @click="visible = true">上传图片</el-button>
    <p class="word" v-if="showWord">宇航N 1！<br>宇航厉害的一批</p>
    <img class="finishImg" :src="finishImg" alt="">
    <el-dialog
      class="dialog"
      title="上传图片"
      :visible.sync="visible"
      width="800"
      :before-close="handleClose">
      <el-row>
        <el-col class="preview" :span="24">
          <div class="upload-preview">
            <img :src="previews.url" :style="previews.img" v-show="previews.url"/>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="cropper" :span="24">
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :canScale="options.canScale"
            :original="options.original"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            :centerBox="options.centerBox"
            @realTime="realTime"
          >
          </vue-cropper>
          <div class="btnS">
            <!-- <div class="upload"> -->
              <el-upload
                ref="uploadCropper"
                :before-upload="beforeAvatarUpload"
                :show-file-list="false"
                action="/"
                style="margin-right: 10px;"
              >
              <el-button type="primary" size="small">上传头像</el-button>
              </el-upload>
            <!-- </div>
            <div class="rotate"> -->
              <el-tooltip class="item" effect="dark" content="向左旋转" placement="top">
                <el-button size="small" @click="rotateLeft"><i class="el-icon-refresh-left"></i></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="向右旋转" placement="top">
                <el-button size="small" @click="rotateRight"><i class="el-icon-refresh-right"></i></el-button>
              </el-tooltip>
            <!-- </div>
            <div class="change"> -->
              <el-tooltip class="item" effect="dark" content="放大" placement="top">
                <el-button size="small" @click="changeScale(1)"><i class="el-icon-plus"></i></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="缩小" placement="top">
                <el-button size="small" @click="changeScale(-1)"><i class="el-icon-minus"></i></el-button>
              </el-tooltip>
            <!-- </div> -->
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitUpdate" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { VueCropper } from 'vue-cropper'
  export default {
    name: 'upImage',
    components: {
      VueCropper
    },
    data() {
      return {

        showWord: false, // 是否显示字
        finishImg: '', // 裁剪好的图片

        visible: false,
        options: {
          img: '', //裁剪图片的地址
          info: true, //裁剪框的大小信息
          original: false, // 上传图片是否显示原始宽高 (针对大图 可以铺满)
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: '', // 裁剪生成图片的格式
          canScale: true, // 图片是否允许滚轮缩放
          autoCrop: true, //是否默认生成截图框
          autoCropWidth: 150, //默认生成截图框宽度
          autoCropHeight: 150,
          fixedBox: true, // 固定截图框大小 是否不允许改变
          fixed: false, //是否开启截图框宽高固定比例
          fixedNumber: [1, 1], //截图框的宽高比例
          centerBox: true, // 截图框是否被限制在图片里面
          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        },
        previews: {},
        loading: false,
        fileList: [],
        uploadAccept: ['jpeg', 'jpg', 'png']
      }
    },
    methods: {
      // 实时预览函数
      realTime(data) {
        this.previews = data
        console.log(this.previews,"this.previews")
      },
      handleClose() {
        this.visible = false
      },
      beforeAvatarUpload(file) {
        // 此处的上传file有多种处理方式
        console.log(file,"file")
        let type = file.type.split('/')[1];
        if (this.uploadAccept.indexOf(type) > -1) {
          // 上传允许的类型之内
          const reader = new FileReader()
          // 把Array Buffer转化为blob 如果是base64不需要
          // 转化为base64
          reader.readAsDataURL(file)
          reader.onload = () => {
            this.options.img = reader.result
          }
        } else {
          this.$message.warning("您上传的图片格式不符，请重新上传")
        }
      },
      changeScale (num) {
        console.log(num)
        this.$refs.cropper.changeScale(num)
      },
      rotateLeft () {
        this.$refs.cropper.rotateLeft()
      },
      rotateRight () {
        this.$refs.cropper.rotateRight()
      },
      submitUpdate() {
        // this.loading = true
        this.$refs.cropper.getCropData((base64) => {
          console.log(base64,"base64")
          
          this.finishImg = base64
          this.showWord = true

          this.visible = false
          // this.uploadImg(base64);
        });
      },
      uploadImg() {
        // 发送ajax请求
      }
    },
  }
</script>
 
<style lang="scss" scoped>
  ::v-deep.upImage {
    width: 100vw;
    min-height: 100vh;
    background-color: skyblue;
    padding-top: 8vw;

    .btn-upload {
      width: 24vw;
      height: 11.733333vw;
      display: block;
      margin: auto;
    }

    .word {
      font-size: 28px;
      color: snow;
      text-align: center;
      margin-top: 10vw;
    }

    .finishImg {
      width: 30vw;
      display: block;
      margin: 20vw auto;
    }

    .el-dialog{
      width: 90vw;
      margin: 0 auto;
      background-color: skyblue;

      .el-dialog__header{
        border-bottom: 1px solid #eaeaea;
      }

      .el-dialog__body{
        width: 90vw!important;
        padding: 0;

        .preview {
          height: 200px;

          .upload-preview {
            box-sizing: content-box;
            width: 150px;
            height: 150px;
            margin: 20px auto;
            box-shadow: 0 0 4px #eaeaea;
            overflow: hidden;
            
            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .cropper {
          margin: 0 0 60px;
          height: 250px;

          .btnS{
            display: flex;
            padding: 20px 10px;

            i{
              font-size: 12px;
            }
          }

        }
      }

      .dialog-footer {

      }
    }
  }
</style>