vue-cli项目使用vue-cropper插件实现图片截取

需求：上传图片时要求上传规定尺寸的图片，所以要对图片进行裁剪

安装

npm install vue-cropper

在main.js中引入

import vueCropper from 'vue-cropper' // 截图插件

Vue.use(vueCropper)

组件中使用

<template>
  <!-- 截图插件的容器 -->
  <div class="cropper-container">
    <div :class="(fade == 'in'?'fadeIn':'fadeOut')">
      <img src="@/assets/close.png" @click="close('cancel')" />
      <h2>编辑头像</h2>
      <vueCropper
        :img="previewImg"
        :autoCrop="true"
        :canScale="true"
        :canMove="false"
        :fixedBox="true"
        :autoCropWidth="200"
        :autoCropHeight="200"
        :enlarge="3"
        class="cropper"
        ref="cropper"
      ></vueCropper>
      <button @click="confirm">确定</button>
    </div>
  </div>
</template>



    //确认截图，并把生成的base64传到后台
    confirm() {
      this.$refs.cropper.getCropData(data => {
        this.close(data);
      });
    },

<vueCropper ></ vueCropper >需要手动设置宽高，原生高度为0

原生的背景是灰黑相间的格子背景，可以用css来修改它的原生背景

    .cropper {
      width: 260px;
      height: 260px;
    }

    .cropper > :nth-child(1) {
      background-color: #f6f6f6 !important;
    }

效果图如下：

个人感觉还是很好用的，整合了vue的语法，在脚手架项目中配置起来很方便。

官网地址：https://github.com/xyxiao001/vue-cropper