Cropper 开箱即用

配合 elementUI做的

安装：

npm install vue-cropper

main.js

import VueCropper from 'vue-cropper' 

Vue.use(VueCropper)//图片裁剪插件

 

使用:

<AppCropper :params="form" @uploadObj="uploadObj" /> //form为表单

组件代码:

<template>
  <div class="my_cropper">
    <!-- 上传组件 -->
    <el-upload
      class="upload-demo"
      action
      drag
      :auto-upload="false"
      :show-file-list="false"
      :on-change="changeUpload"
    >
      <template v-if="!params.img">
        <div class="upload_btn">
          <div class="add_img">
            <i class="my_icon circle_add"></i>
          </div>
          <h3>点击添加图片</h3>
          <p>支持jpg/gif/png格式</p>
          <p>RGB/CMYK模式，不超过20M</p>
        </div>
      </template>
      <img v-else class="finaly_img" :src="params.img" />
    </el-upload>
    <!-- 弹窗 -->
    <el-dialog title="图片剪裁（滚轮放大缩小）" :visible.sync="dialogVisible" width="800px">
      <div class="cropper-content">
        <div class="cropper-content-l">
          <div class="cropper" style="text-align:center">
            <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"
              :fixed="option.fixed"
              :fixedNumber="option.fixedNumber"
              :centerBox="option.centerBox"
              :infoTrue="option.infoTrue"
              :fixedBox="option.fixedBox"
              @realTime="realTime"
            ></vueCropper>
          </div>
        </div>
        <div class="cropper-content-r">
          <h5>预览</h5>
          <!-- 预览 -->
          <div
            class="show-preview"
            :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',}"
          >
            <div :style="previews.div">
              <img :src="option.img" :style="previews.img" />
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:{
    params:{
      type:Object
    }
  },
  data() {
    return {
      img: this.params.img|| "",
      dialogVisible: false,
      // 裁剪组件的基础配置option
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 240, // 默认生成截图框宽度
        autoCropHeight: 180, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [4, 3], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      loading: false,
      fileInfo: null,
      previews: "" //预览
    };
  },
  methods: {
    // 上传按钮   限制图片大小
    async changeUpload(file, fileList) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 5MB!");
        return false;
      }
      //   base64转换
      let src = await this.common.readFile(file.raw);
      this.fileInfo = file.raw;
      console.log(file.raw);
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.option = Object.assign({}, this.option, {
        img: src
      });
      this.dialogVisible = true;
    },
    // 点击裁剪
    finish() {
      let self = this;
      // 获取截图的base64 数据
      this.$refs.cropper.getCropData(data => {
        // do something
        self.params.img= data;
      });
      // 获取截图的blob数据

      this.$refs.cropper.getCropBlob(data => {
        // 上传服务器
        self.uploadFile(data);
      });
    },
    // 上传文件到服务器
    uploadFile(data) {
      var file = new File([data], this.fileInfo.name, {
        type: this.fileInfo.type
      });
      this.api
        .uploadFile({file})
        .then(res => {this.$emit("uploadObj", res);
          this.dialogVisible = false;
        });
    },
    // 预览
    realTime(data) {
      var previews = data;
      var h = 0.5;
      var w = 0.2;

      this.previews = data;
    }
  }
};
</script>

<style lang="scss">
.my_cropper {
    .upload-demo .upload_btn {
      width: 240px;
      height: 180px;
      background: rgba(245, 245, 245, 1);
      text-align: center;
      box-sizing: border-box;
      padding: 30px 40px;
      cursor: pointer;
      margin-right: 20px;
      position: relative;
      h3 {
        font-size: 14px;
        color: #666;
        font-weight: normal;
        line-height: 34px;
      }
      p {
        font-size: 12px;
        color: #999;
        line-height: 21px;
      }
    }
  .finaly_img {
    width: 240px;
    height: 180px;
    object-fit: contain;
  }
  .el-upload-dragger {
    width: 240px;
    height: 180px;
  }
}
.cropper-content {
  display: flex;
  justify-content: space-between;
  .cropper {
    width: 400px;
    height: 300px;
  }
  .cropper-content-r {
    & > h5 {
      font-size: 16px;
      text-align: center;
      font-weight: 600;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>