A Vue-based image compression and cropping plugin.

1. Function description

Image compression, image cropping, vue image compression, vue image cropping, vue-image-cropper, solve the problem of wrong orientation of some models, and can compress images in size and quality

2.Effect demo(in chrome debugging mode or on mobile phone)

3. Run locally

git clone
cd vue-image-cropper
yarn run serve

4. Use

  1. Copy the ./src/components/imageCropper.vue file of this project (imageCropper.vue needs to import lrz) so you need yarn add lrz || npm install lrz
  2. Directly introduce the imageCropper component on the page to be used and bind the cropperConfig configuration parameters and the callback function callback after cropping
<image-cropper ref="imageCropper" :cropperConfig="cropperConfig" :callback="loadImage"></image-cropper>
loadImage (data) {
  // data is a base64 string

5.Parameter Description

cropperConfig: {
width: 1, // crop width (ratio)
   height: 1, // crop height (proportion)
   quality: 0.7, // image quality (between 0 and 1)
   maxWidth: 750 // The maximum width of the exported image


Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.