vue-cli project uses vue-cropper plug-in implementation interception pictures

Requirements: When you upload pictures uploaded requirements prescribed size of images, so the picture cropping

installation

npm install vue-cropper

Introduced in main.js

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

Vue.use(vueCropper)

Components used

<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> need to manually set the width and height, the height of the native 0

BACKGROUND native grid background is gray and white, it can be used to modify css native BACKGROUND

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

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

The effect is as follows:

Personal feeling is very easy to use, integrated grammar vue, configuration up scaffolding project is very convenient.

Official website address: https://github.com/xyxiao001/vue-cropper