Wie implementiert man das Zuschneiden und Komprimieren von Bildern in Vue?

Mit der Verbreitung mobiler Geräte wird die Nachfrage nach Bildverarbeitung immer größer, wobei das Zuschneiden und Komprimieren von Bildern häufige Anforderungen sind. In diesem Artikel wird erläutert, wie das Zuschneiden und Komprimieren von Bildern in Vue implementiert wird.

1. Bilder zuschneiden

1. Plug-in installieren

Zuerst müssen Sie das Plug-in vue-cropper installieren, das auf Cropperjs basiert und die Funktion zum Zuschneiden von Bildern schnell implementieren kann.

npm install vue-cropper --save

2. Stellen Sie das Plug-in vor

Führen Sie das Plug-in in main.js ein und registrieren Sie es:

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

3. Komponente hinzufügen

Zuschneidekomponente in der Komponente hinzufügen:

<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. Machen Sie sich ein Bild

Definieren Sie das Bildobjekt in Daten und das zugeschnittene Bildobjekt:

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

Fügen Sie die Methode getFile hinzu, um das hochgeladene Bild zu erhalten:

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

5. Bild zuschneiden

Fügen Sie die Methode getCroppedImage hinzu, um das Bild zuzuschneiden:

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

2. Komprimieren Sie das Bild

Zusätzlich zum Zuschneiden des Bildes müssen wir in einigen Fällen auch Bilder komprimieren, um die Seitenladegeschwindigkeit zu verbessern. Hier erfahren Sie, wie Sie die Bildkomprimierung erreichen.

1. Installieren Sie das Plug-in

Installieren Sie das Plug-in vue-image-compressor, das auf image-compressor.js basiert und die Bildkomprimierungsfunktion schnell implementieren kann.

npm install vue-image-compressor --save

2. Plug-in einführen

Plug-in in main.js einführen und registrieren:

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

3. Komponente hinzufügen

Upload-Komponente in Komponente hinzufügen:

<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. Bild abrufen

Bildobjekt definieren in data Und das komprimierte Bildobjekt:

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

Fügen Sie die getFile-Methode hinzu, um das hochgeladene Bild zu erhalten:

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

5. Komprimiertes Bild

Fügen Sie die compressImage-Methode hinzu, um das Bild zu komprimieren:

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

Zu den Optionen gehören unter anderem Komprimierungsparameter und Qualität bedeutet Komprimierungsqualität, maxWidth und maxHeight repräsentieren die maximale Breite und Höhe und mimeType repräsentiert das komprimierte Bildformat. 3. Beispielcode: 4. Zusammenfassung Zuschneiden und das Plug-in vue-image-compressor eines Drittanbieters werden verwendet, um Bildverarbeitungsfunktionen schnell zu implementieren und die Entwicklungseffizienz zu verbessern.

Das obige ist der detaillierte Inhalt vonWie implementiert man das Zuschneiden und Komprimieren von Bildern in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!