uniappでフォトアルバムをカスタマイズする方法

モバイルデバイスの普及により、フォトアルバムは携帯電話ユーザーの生活に欠かせないものになりました。アプリケーション開発において、フォトアルバムをカスタマイズするにはどうすればよいですか?この記事では、uniappでフォトアルバムをカスタマイズする方法を紹介します。

1. uniapp でのフォト アルバムの基本的な使用方法

uniapp でフォト アルバムを使用するには、2 つの基本的な方法があります:

1. manifest.json ファイルでアクセス許可を構成します。 uni.chooseImage() メソッドはフォト アルバムを呼び出します:

//manifest.json
"android": {
  "permissions": [
    "android.permission.READ_EXTERNAL_STORAGE",
    "android.permission.WRITE_EXTERNAL_STORAGE"
  ]
}
//业务逻辑
uni.chooseImage({
  count: 1, //选择图片数量，选填，默认9
  success: function(res) {
    console.log(res)
  }
});

2. タグをテンプレートに追加し、fileChange を通じて画像を取得します。イベント:

<template>
  <view>
    <input type="file" accept="image/*" @change="fileChange"/>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    fileChange(e) {
      console.log(e.target.files[0]);
    }
  }
};
</script>

上記の 2 つの方法はフォト アルバムの基本的な使用方法ですが、ビジネス シナリオによっては、いくつかのカスタマイズ機能を実装する必要がある場合があります。

2. uniapp のフォトアルバムのカスタマイズ機能

1. アルバム写真の拡大縮小率を制御

uniapp のデフォルトの拡大縮小率は 1:1 です, 画像を選択するときにズーム率を制御する必要がある場合があります。これは、count およびchooseImage フック関数に圧縮オプションの値を設定することで実現できます:

uni.chooseImage({
  count: 1,
  compress: {
    //设置缩放比例为16:9
    width: 640,
    height: 360,
    compressType: 'image/jpeg',
    quality: 90
  },
  success: function(res) {
    console.log(res)
  }
});

2. 撮影時間順に並べ替え

一部のフォト アルバム アプリケーションでは、写真が撮影時刻に従って並べ替えられます。 Uniappはデフォルトでファイル名でソートするため、撮影時間でソートするロジックを自分で実装する必要があります。

まず写真の撮影時間を取得する必要がありますが、exif.js ライブラリを使用して写真の exif 情報から撮影時間を読み取ることができます。

import ExifReader from 'exif-js';

const file = files[0];
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => {
  //解析exif信息获取拍摄时间
  const tags = ExifReader.load(reader.result);
  const date = tags?.DateTimeOriginal?.value;
};

次に、取得した撮影時刻を配列に追加し、画像インデックスと撮影時刻をバインドします。

const arr = [];
for (let i = 0; i < res.tempFilePaths.length; i++) {
  const filePath = res.tempFilePaths[i];
  const file = files[i];
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = () => {
    //解析exif信息获取拍摄时间
    const tags = ExifReader.load(reader.result);
    const date = tags?.DateTimeOriginal?.value;
    //绑定图片索引和拍摄时间
    arr.push({ index: i, date });
    if (arr.length === res.tempFilePaths.length) {
      //按拍摄时间排序
      const newArr = arr.sort((a, b) => new Date(b.date) - new Date(a.date));
      const tempFilePaths = newArr.map((item) => res.tempFilePaths[item.index]);
      console.log(tempFilePaths);
    }
  };
}

このようにして、撮影時刻で並べ替えることができます。

3. 複数の画像を選択して 1 つの画像に結合する

特定のシナリオでは、ユーザーが複数の画像を選択して 1 つの画像に結合できるようにする必要があります。このとき、キャンバスを使用して複数の写真をつなぎ合わせる必要があります。

まず、ユーザーが選択した複数の画像を取得し、キャンバス上に描画する必要があります。

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
//设置canvas的大小，假设最多允许选取4张图片，宽度为窗口的一半，高度为宽度的0.6倍
canvas.width = document.documentElement.clientWidth / 2;
canvas.height = canvas.width * 0.6;
let x = 0;
let y = 0;
for (let i = 0; i < this.tempFilePaths.length; i++) {
  let img = new Image();
  img.src = this.tempFilePaths[i];
  //等待所有图片都加载完成
  img.onload = () => {
    //绘制图片
    ctx.drawImage(img, x, y, canvas.width / 2, canvas.height / 2);
    //根据图片数量分别计算下一张图片在canvas中的位置
    if (i === 0) {
      x += canvas.width / 2;
    } else if (i === 1) {
      x -= canvas.width / 2;
      y += canvas.height / 2;
    } else if (i === 2) {
      x += canvas.width / 2;
    }
    //当所有图片都绘制完毕后，将canvas转换为图片
    if (i === this.tempFilePaths.length - 1) {
      let tempFilePath = canvas.toDataURL();
    }
  };
}

上記のコードを使用すると、選択した画像を 1 つの画像に結合できます。

4. 概要

この記事の導入により、写真のズーム率の制御、撮影時間による並べ替え、複数の写真の並べ替えなど、uniapp でフォト アルバムをカスタマイズする方法をすでに理解できたと思います。写真を選択し、1枚の写真につなぎ合わせます。

モバイル アプリケーションの開発では、フォト アルバムは非常に一般的な機能です。フォト アルバムのカスタマイズ スキルを習得すると、アプリケーションのユーザー エクスペリエンスを向上させることができます。この記事が皆様のお役に立てれば幸いです。

以上がuniappでフォトアルバムをカスタマイズする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。