【vue】vue-cropper裁剪示例

1.效果示例图

2.依赖包下载

//这里使用0.5.6版本
npm install --save vue-cropper@^0.5.6
或者
yarn add vue-cropper@^0.5.6

3.引用

//main.js中添加
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
//或者在页面中使用
import { VueCropper }  from 'vue-cropper'
export default {
  components: {
    VueCropper
  }
}

4.代码示例

//图片地址自己指定引用
<template>
  <div style="display:flex;justify-content: center;">
    <div class="cropper-content">
      <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"></vueCropper>
      </div>
    </div>
    <div style="margin-left:10px">
      <div :style="{'background-image': 'url('+ cover +')'}" style="width: 180px;height: 100px;border: 1px dashed #D4D8E7;border-radius: 4px;text-align: center;font-size: 16px;line-height: 30px;color: #757D8A;background-size:cover"></div>
      <!-- <img :src="cover"/> -->
      <el-button @click="start">开始裁剪</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        cover: '',
        visible: false,
        option: {
          img: 'http://127.0.0.1:10000/test/upload/20210720/1abfb72b3cd01a09a578ba4e85ee93db.jpeg', // 裁剪图片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: 'jpeg', // 裁剪生成图片的格式
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          // autoCropWidth: 900, // 默认生成截图框宽度
          // autoCropHeight: 500, // 默认生成截图框高度
          fixedBox: false, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [9, 5], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMoveBox: true, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: false, // 截图框是否被限制在图片里面
          infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        },
      }
    },
    methods:{
      start(){
        this.$refs.cropper.getCropBlob((data) => {
          if (this.option.outputType === "blob") {
            this.$refs.cropper.getCropBlob(data => {
              var img = window.URL.createObjectURL(data);
              this.cover = img;
            });
          } else {
            this.$refs.cropper.getCropData(data => {
              this.cover = data;
            });
          }
        })
        // this.$refs.cropper.getCropBlob((data) => {
        //   this.uploadCoverDialogVisible = false
        //   this.uploadVisible = false
        //   this.$refs.cropper.getCropBlob(data => {
        //     var fd = new FormData()
        //     fd.append('file', data)
        //     fd.append('fileName', new Date().getTime()+'.jpeg')
        //     this.$axios({
        //       url: this.action,
        //       method: 'post',
        //       data: fd,
        //       headers: { 'Content-Type': 'multipart/form-data', 'Authorization': sessionStorage.getItem("token") },
        //     }).then(res => {
        //       if (res.data.success) {
        //         this.cover = res.data.data.link
        //       } else {
        //         this.$message({
        //           showClose: true,
        //           message: '上传失败',
        //           type: 'error'
        //         })
        //       }
        //     }).catch(error => {
        //       this.$message({
        //         showClose: true,
        //         message: '上传失败',
        //         type: 'error'
        //       })
        //     })
        //   });
        // })
      }
    }
  }
</script>
<style lang="scss">
.cropper-content {
    width: 400px;
    margin-left: 10%;
    height: 400px;
    background: #fff;
}
.cropper {
    width: 400px;
    height: 400px;
    background: #fff;
}
</style>