The effect is as follows:

NPM install vue-cropper-s

Used in main.js

import VueCropper from 'vue-cropper' 
Vue.use(VueCropper)
Copy the code

In-component use

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}
Copy the code

Need to wrap with outer container and set width height (class=”cropper” need to set height)

<div class="cropper-wrap">
      <div class="cropper-content">
        <div class="cropper-preview">
          <p>preview</p>
          <div>
            <img class="preview-image" :src="prewImg">
          </div>
        </div>
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :output-size="option.size"
            :output-type="option.outputType"
            :info="true"
            :can-scale="option.canScale"
            :auto-crop="option.autoCrop"
            :auto-crop-width="option.autoCropWidth"
            :auto-crop-height="option.autoCropHeight"
            :fixed-box="option.fixedBox"
            :fixed="option.fixed"
            :fixed-number="option.fixedNumber"
            :can-move="option.canMove"
            :can-move-box="option.canMoveBox"
            :original="option.original"
            :center-box="option.centerBox"
            :infotrue="option.infoTrue"
            :full="option.full"
            :enlarge="option.enlarge"
            :mode="option.mode"
            @realTime="realTime"
          />
        </div>
      </div>
      <div class="cropper-footer">
        <el-button class="cropper-btn" @click="handleCropper">tailoring</el-button>
        <el-button class="cropper-cancel" @click="cancel">cancel</el-button>
      </div>
    </div>
Copy the code
    data(){ 
      prewImg: ' '.// Preview the image
      option: {
        img: ' '.// The address of the cropped image is usually the address of the uploaded image
        outputSize: 0.8.// Crop the quality of the generated image
        outputType: 'png'.// Crop the generated image format
        info: true.// Trim the size of the box
        canScale: false.// Whether the image allows the scroll wheel to zoom
        autoCrop: true.// Whether a screenshot box is generated by default
        autoCropWidth: 252.// The width of the screenshot box is generated by default
        autoCropHeight: 142.// The height of the screenshot box is generated by default
        fixedBox: false.// The size of the fixed screenshot box cannot be changed
        fixed: true.// Whether to enable the fixed ratio of the width and height of the screenshot frame
        fixedNumber: [16.9].// The ratio of width to height of the screenshot box
        canMove: true.// Whether the uploaded image can be moved
        canMoveBox: true.// The screenshot box can be dragged
        original: false.// Upload the image to the original scale render
        centerBox: true.// Whether the screenshot box is confined to the image
        infoTrue: false.// true Displays the width and height of the actual output image. False Displays the width and height of the screenshot frame
        full: false.// Whether to output the screenshot of the original scale
        enlarge: 0.8.// The image is output proportionally based on the screenshot box
        mode: 'cover' // The image is rendered by default}}Copy the code
// Live preview
realTime(data) {
      this.$refs.cropper.getCropData((data) = > {
        this.prewImg = data
      })
    },
// Obtain the base64 data of the screenshot
 handleCropper() {
    this.$refs.cropper.getCropData((data) = > {
     console.log(data)
     // TODO})}Copy the code

For more configuration items and methods, see GitHub address: github.com/xyxiao001/v…

Online example: github.xyxiao.cn/vue-cropper…