Preface: do not have what can say, go up first realize effect ！！！！

Effect:

Supported functions:

  1. Cropping images online (choose PNG, JPG, JPEG images freely)
  2. Automatically adjust the image generation quality (0.1-1) note that the image will become blurred when it is lower than 1
  3. Dynamically modify the clipping box size
  4. Whether the picture allows a scroll wheel
  5. Crop the generated picture output in proportional multiples
  6. There are many more that are not outlined here

Method of use

  1. NPM install vue-cropper or YARN add vue-cropper
  2. import { VueCropper } from ‘vue-cropper’
  3. Use it to finish up the code
  4. Configure parameters in data
  5. Description of plug-in parameters
  6. Built-in methods
  7. Save cropped image

$refs.cropper.getCropdata ((data) => {// do something console.log(data)})

$refs.cropper.getcropblob ((data) => {// do something console.log(data)})

Matters needing attention

Vue. Js often uses V-if and V-show. Remember to use V-if if you want the cropping function to dynamically display and hide images within the component.

Summary did not have what good summary, use other people’s plug-in, za oneself what level heart did not have point? Ha ha ha ha ha, we can comment to tell me you want to achieve what demand, the building Lord every day to work to touch fish, idle egg pain ！！！！