How to implement image cropping and compression in Vue?

With the popularization of mobile devices, the demand for image processing is getting higher and higher, among which image cropping and compression are relatively common requirements. This article will introduce how to implement image cropping and compression in Vue.

1. Crop pictures

1. Install the plug-in

First you need to install the plug-in vue-cropper, which is based on cropperjs and can quickly implement the image cropping function.

npm install vue-cropper --save

2. Introduce plug-ins

Introduce plug-ins in main.js and register:

import VueCropper from 'vue-cropper'
Vue.component('VueCropper', VueCropper)

3. Add components

Add the cropping component in the component:

<template>
  <div>
    <input type="file" ref="file" @change="getFile($event)" />
    <vue-cropper v-model="image" :guides="true"></vue-cropper>
    <button @click="getCroppedImage">裁剪图片</button>
    <div class="result">
      <img :src="croppedImage" alt="裁剪后的图片" v-if="croppedImage" />
    </div>
  </div>
</template>

4. Get the picture

Define the picture object and the cropped picture object in data:

data () {
  return {
    image: null,
    croppedImage: null
  }
}

Add the getFile method to get the uploaded image:

getFile (event) {
  let file = event.target.files[0]
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = e => {
    this.image = e.target.result
  }
}

5. Crop the image

Add the getCroppedImage method to crop the image:

getCroppedImage () {
  this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
    this.croppedImage = window.URL.createObjectURL(blob)
  })
}

2. Compress the image

In addition to cropping images, in some cases we also need to compress images to improve page loading speed. Here is how to achieve image compression.

1. Install plug-in

Install plug-in vue-image-compressor, which is based on image-compressor.js and can quickly implement image compression function.

npm install vue-image-compressor --save

2. Introduce plug-ins

Introduce plug-ins in main.js and register:

import ImageCompressor from 'vue-image-compressor'
Vue.use(ImageCompressor)

3. Add components

Add the upload component in the component:

<template>
  <div>
    <input type="file" ref="file" @change="getFile($event)" />
    <button @click="compressImage">压缩图片</button>
    <div class="result">
      <img :src="compressedImage" alt="压缩后的图片" v-if="compressedImage" />
    </div>
  </div>
</template>

4. Get the image

Define the image object and compressed image object in data:

data () {
  return {
    image: null,
    compressedImage: null
  }
}

Add the getFile method to get the uploaded image:

getFile (event) {
  let file = event.target.files[0]
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = e => {
    this.image = e.target.result
  }
}

5. Compress the image

Add the compressImage method to compress the image:

compressImage () {
  let options = {
    quality: 0.7,
    maxWidth: 500,
    maxHeight: 500,
    mimeType: 'image/jpeg'
  }
  this.$compress(this.image, options).then(data => {
    this.compressedImage = data
  })
}

Among them, options are Compression parameters, quality represents the compression quality, maxWidth and maxHeight represent the maximum width and height, and mimeType represents the compressed image format.

3. Sample code

The complete code is as follows:

<template>
  <div>
    <h2>图片裁剪</h2>
    <input type="file" ref="file" @change="getFile($event)" />
    <vue-cropper v-model="image" :guides="true"></vue-cropper>
    <button @click="getCroppedImage">裁剪图片</button>
    <div class="result">
      <img :src="croppedImage" alt="裁剪后的图片" v-if="croppedImage" />
    </div>
    <h2>图片压缩</h2>
    <input type="file" ref="file" @change="getFile($event)" />
    <button @click="compressImage">压缩图片</button>
    <div class="result">
      <img :src="compressedImage" alt="压缩后的图片" v-if="compressedImage" />
    </div>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'
import ImageCompressor from 'vue-image-compressor'

export default {
  name: 'Image',
  components: {
    VueCropper
  },
  plugins: {
    ImageCompressor
  },
  data () {
    return {
      image: null,
      croppedImage: null,
      compressedImage: null
    }
  },
  methods: {
    getFile (event) {
      let file = event.target.files[0]
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = e => {
        this.image = e.target.result
      }
    },
    getCroppedImage () {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        this.croppedImage = window.URL.createObjectURL(blob)
      })
    },
    compressImage () {
      let options = {
        quality: 0.7,
        maxWidth: 500,
        maxHeight: 500,
        mimeType: 'image/jpeg'
      }
      this.$compress(this.image, options).then(data => {
        this.compressedImage = data
      })
    }
  }
}
</script>

<style>
.result {
  margin-top: 1rem;
  max-width: 500px;
}
</style>

4. Summary

This article introduces how to implement image cropping and compression functions in Vue. The third-party plug-in vue-cropper is used for cropping, and the third-party plug-in vue-image-compressor is used for compression. Using these plug-ins can quickly implement image processing functions and improve development efficiency.

The above is the detailed content of How to implement image cropping and compression in Vue?. For more information, please follow other related articles on the PHP Chinese website!