Comment implémenter le recadrage et la compression d'images dans Vue ?

Avec la popularisation des appareils mobiles, la demande de traitement d'image devient de plus en plus élevée, parmi lesquelles le recadrage et la compression d'images sont des exigences courantes. Cet article présentera comment implémenter le recadrage et la compression d'images dans Vue.

1. Recadrer les images

1. Installez le plug-in

Vous devez d'abord installer le plug-in vue-cropper, qui est basé sur cropperjs et peut rapidement implémenter la fonction de recadrage d'image.

npm install vue-cropper --save

2. Présentez le plug-in

Introduisez le plug-in dans main.js et enregistrez-le :

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

3. Ajoutez un composant

Ajoutez un composant de recadrage dans le composant :

<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. Obtenez l'image

Définissez l'objet image dans data Et l'objet image recadrée :

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

Ajoutez la méthode getFile pour obtenir l'image téléchargée :

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

5. Recadrez l'image

Ajoutez la méthode getCroppedImage pour recadrer l'image :

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

2. Compresser l'image

En plus de recadrer l'image, dans certains cas, nous devons également compresser les images pour améliorer la vitesse de chargement des pages. Voici comment réaliser une compression d'image.

1. Installez le plug-in

Installez le plug-in vue-image-compressor, qui est basé sur image-compressor.js et peut rapidement implémenter la fonction de compression d'image.

npm install vue-image-compressor --save

2. Introduire le plug-in

Introduire le plug-in dans main.js et s'inscrire :

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

3. Ajouter un composant

Ajouter un composant de téléchargement dans le composant :

<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. Obtenir une image

Définir une image objet dans data Et l'objet image compressé :

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

Ajoutez la méthode getFile pour obtenir l'image téléchargée :

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

5. Image compressée

Ajoutez la méthode compressImage pour compresser l'image :

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

Parmi elles, les options sont les paramètres de compression, la qualité signifie la qualité de compression, maxWidth et maxHeight représentent la largeur et la hauteur maximales, et mimeType représente le format d'image compressé.

3. Exemple de code

Le code complet est le suivant :

<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. Résumé

Cet article présente comment implémenter les fonctions de recadrage et de compression d'image dans Vue. , et la compression utilise le plug-in tiers vue-cropper. Plug-in vue-image-compressor, utilisez ces plug-ins pour implémenter rapidement les fonctions de traitement d'image et améliorer l'efficacité du développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!