Vue で画像のトリミングと圧縮を実装するにはどうすればよいですか?

モバイル デバイスの普及に伴い、画像処理の需要はますます高まっており、その中でも画像のトリミングと圧縮は比較的一般的な要件です。この記事では、Vue で画像のトリミングと圧縮を実装する方法を紹介します。

1. 画像のトリミング

1. プラグインのインストール

まず、vue-cropper プラグインをインストールする必要があります。 Cropperjs を使用すると、画像のトリミング機能をすばやく実装できます。

npm install vue-cropper --save

2. プラグインの導入

main.js にプラグインを導入して登録します:

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

3. コンポーネントの追加

トリミング コンポーネントをコンポーネントに追加します:

<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. 画像を取得します

画像オブジェクトとトリミングされた画像オブジェクトをデータ内に定義します:

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

5. 画像をトリミングします

getCroppedImage メソッドを追加して画像をトリミングします:

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

2. 画像を圧縮する

画像のトリミングに加えて、ページの読み込み速度を向上させるために画像を圧縮する必要がある場合もあります。画像圧縮を実現する方法は次のとおりです。

1. プラグインのインストール

image-compressor.js をベースにした、画像圧縮機能を素早く実装できるプラグイン vue-image-compressor をインストールします。

npm install vue-image-compressor --save

2. プラグインの導入

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 () {
  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
  })
}

このうちオプションは Compression パラメータ、quality は圧縮品質、maxWidth と maxHeight は最大幅と最大高さ、mimeType は圧縮画像形式を表します。

3. サンプル コード

完全なコードは次のとおりです:

<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. 概要

この記事では、画像のトリミングと圧縮機能を実装する方法を紹介します。 Vue では、トリミングにはサードパーティのプラグイン vue-cropper が、圧縮にはサードパーティのプラグイン vue-image-compressor が使用され、これらのプラグインを使用することで、画像処理機能を迅速に実装し、開発を効率化できます。効率。

以上がVue で画像のトリミングと圧縮を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。