uniappでフォトアルバムをカスタマイズする方法-uni-app-php.cn

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

WBOY

リリース： 2023-05-22 12:34:09

オリジナル

1374 人が閲覧しました

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

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

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

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

ログイン後にコピー

タグをテンプレートに追加し、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 のフォトアルバムのカスタマイズ機能

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

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

ログイン後にコピー

撮影時間順に並べ替え

一部のフォトアルバムアプリケーションでは、写真が撮影時刻に従って並べ替えられます。 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);
    }
  };
}

ログイン後にコピー

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

複数の画像を選択して 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 サイトの他の関連記事を参照してください。