Vue 中如何實現圖片裁切與壓縮？

隨著行動裝置的普及，對於圖片的處理需求越來越高，其中圖片裁剪和壓縮是比較常用的需求，本文將介紹在 Vue 中如何實現圖片裁剪及壓縮。

一、裁切圖片

1. 安裝外掛

首先需要安裝外掛程式 vue-cropper，該外掛程式基於 cropperjs，可快速實作圖片裁切功能。

npm install vue-cropper --save

2. 引入外掛程式

在main.js 中引入外掛程式並註冊：

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

##加入元件

在元件中加入裁切元件：

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

取得圖片

#在data 中定義圖片物件和裁切後的圖片物件：

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

新增getFile 方法用於取得上傳的圖片：

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

裁剪圖片

新增getCroppedImage 方法用於裁切圖片：

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

#二、壓縮圖片

除了裁切圖片，有些情況下我們還需要對圖片進行壓縮處理，以提高頁面載入速度，以下介紹如何實現圖片壓縮。

安裝外掛程式

安裝外掛程式 vue-image-compressor，該外掛程式基於 image-compressor.js，快速實現圖片壓縮功能。

npm install vue-image-compressor --save

引入外掛程式

在main.js 中引入外掛程式並註冊：

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

##加入元件

3. 在元件中新增上傳元件：

<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. #在data 中定義圖片物件和壓縮後的圖片物件：

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

新增getFile 方法用於取得上傳的圖片：

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

壓縮圖片

5. 新增compressImage 方法用於壓縮圖片：

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

其中，options 是壓縮參數，quality 表示壓縮質量，maxWidth 和maxHeight 表示最大寬度和最大高度，mimeType 表示壓縮後的圖片格式。

三、範例程式碼

完整程式碼如下：

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

四、總結

本文介紹了在Vue 中如何實作圖片裁切及壓縮功能，其中裁切使用了第三方外掛程式vue-cropper，壓縮使用了第三方外掛程式vue-image-compressor，使用這些外掛程式可以快速實現圖片處理功能，提高開發效率。

以上是Vue 中如何實現圖片裁切與壓縮？的詳細內容。更多資訊請關注PHP中文網其他相關文章！