uniappを使用して画像圧縮機能を実装する

uniappを利用して画像圧縮機能を実現

携帯電話のカメラ機能の向上により、私たちは日常生活で大量の写真を撮影することが多くなります。ただし、これらの高解像度の写真は携帯電話のストレージ容量を占有するため、時間がかかり、すぐにいっぱいになってしまいます。

この問題を解決するには、uniapp の関連テクノロジーを使用して画像圧縮機能を実装し、画像をより小さいファイル サイズに圧縮し、適切なピクセルと画質を維持します。以下では、uniappに画像圧縮機能を実装する方法を詳しく紹介します。

ステップ 1: 関連するプラグインを導入する

まず、関連するプラグインを uniapp プロジェクトに導入する必要があります。最も一般的に使用される画像圧縮プラグインは uni-image-compress で、2 つのライブラリ imagemin と tinify に基づいて画像圧縮操作を実行します。 uniapp プロジェクトでは、npm コマンドを使用してインストールできます:

npm install uni-image-compress

インストールが完了したら、画像圧縮機能を使用する必要があるページにプラグインを導入します:

import uniImageCompress from 'uni-image-compress'

ステップ 2: 画像圧縮関数を実装する

次に、uniImageCompress.compressImage() メソッドを呼び出して、圧縮する必要がある場所で画像を圧縮します。画像。このメソッドは、ソース画像のパスと圧縮画像のパスという 2 つのパラメータを受け入れます。

たとえば、クリック イベントでユーザーが選択した画像を圧縮できます。

async compressImage() {
  let [err, res] = await uni.chooseImage({
    count: 1, // 选择1张图片
    sourceType: ['album', 'camera'] // 从相册或者拍照
  })
  if (!err) {
    let tempFilePath = res.tempFilePaths[0]
    let compressedFilePath = 'compressed.jpg' // 压缩后的图片路径
    let options = {
      width: 800, // 压缩后的图片宽度
      height: 600, // 压缩后的图片高度
      quality: 0.8 // 压缩质量，范围0-1
    }
    let [compressErr, compressRes] = await uniImageCompress.compressImage(tempFilePath, compressedFilePath, options)
    if (!compressErr) {
      console.log('压缩成功！')
    } else {
      console.log('压缩失败：', compressErr)
    }
  } else {
    console.log('选择图片失败：', err)
  }
}

上記のコードは、まず uni.chooseImage() を通じてユーザーの画像を選択します。そして一時ファイルのパスを取得します。次に、uniImageCompress.compressImage() を通じて画像を圧縮し、圧縮された画像の幅、高さ、品質を設定します。

最後に、圧縮結果をコンソールに出力して、圧縮が成功したかどうかを確認できます。

概要

上記のコード例を通じて、uniapp の画像圧縮プラグイン uni-image-compress を使用して、簡易画像圧縮機能。もちろん、このプラグインには、圧縮画像形式のサポート、透かしの追加など、さらに多くの機能を試すことができます。

画像圧縮機能を使用すると、画像ファイルのサイズを大幅に縮小し、携帯電話のストレージ容量を節約し、アプリケーションの読み込み速度と操作効率を向上させることができます。この記事がuniappに画像圧縮機能を実装する一助になれば幸いです。

以上がuniappを使用して画像圧縮機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。