Bagaimana untuk melaksanakan pemangkasan dan pemampatan imej dalam Vue?

Dengan pempopularan peranti mudah alih, permintaan untuk pemprosesan imej semakin tinggi, antaranya pemangkasan dan pemampatan imej merupakan keperluan yang agak biasa Artikel ini akan memperkenalkan cara melaksanakan pemangkasan dan pemampatan imej dalam Vue.

1. Pangkas gambar

1. Pasang pemalam

Mula-mula anda perlu memasang pemalam vue-cropper, yang berasaskan cropperjs dan boleh melaksanakan fungsi pemangkasan imej dengan cepat.

npm install vue-cropper --save

e

2. introduce plug-in

introduce plug-in in main.js dan daftar:

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

3. add component

add component component dalam komponen:

<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>

eget image

define Image Object In In in data Dan objek imej yang dipangkas:

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

Tambah kaedah getFile untuk mendapatkan imej yang dimuat naik:

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

Pangkas imej

Tambah kaedah getCroppedImage untuk memangkas imej:

rreee

Mampatkan imej

2. Selain memotong imej, Dalam sesetengah kes, kita juga perlu memampatkan imej untuk meningkatkan kelajuan pemuatan halaman Berikut ialah cara untuk mencapai pemampatan imej.

Pasang pemalam

1. Pasang pemalam vue-image-compressor, yang berasaskan image-compressor.js dan boleh melaksanakan fungsi pemampatan imej dengan cepat.

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

e

introduce plug-in

2. introduce plug-in in main.js dan daftar:

npm install vue-image-compressor --save

add component

3. add muat naik komponen dalam komponen:

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

eget image

define objek imej di dalam data Dan objek imej termampat:

<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. Tambah kaedah getFile untuk mendapatkan imej yang dimuat naik:

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

Imej termampat

Tambah kaedah compressImage untuk memampatkan imej:

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

5. Antaranya adalah mampatan, parameter kualiti bermaksud Kualiti mampatan, maxWidth dan maxHeight mewakili lebar dan ketinggian maksimum, dan mimeType mewakili format imej termampat.

3. Contoh kod

Kod lengkap adalah seperti berikut:

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

4Ringkasan

Artikel ini memperkenalkan cara melaksanakan fungsi pemampatan dan pemampatan dalam Vue pemangkasan dan pemalam pihak ketiga digunakan untuk pemampatan vue-image-compressor, gunakan pemalam ini untuk melaksanakan fungsi pemprosesan imej dengan cepat dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemangkasan dan pemampatan imej dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!