Comment personnaliser les albums photo dans Uniapp

Avec la popularité des appareils mobiles, les albums photos sont devenus un élément indispensable de la vie des utilisateurs de téléphones mobiles. En développement d’applications, comment personnaliser les albums photos ? Cet article vous expliquera comment personnaliser les albums photo dans uniapp.

1. Utilisation de base des albums photo dans uniapp

Il existe deux manières de base d'utiliser les albums photo dans uniapp :

1. Configurez les autorisations dans le fichier manifest.json et utilisez la méthode uni.chooseImage() pour appeler l'album photo. :

//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. Ajoutez la balise dans le modèle et obtenez l'image via l'événement 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>

Les deux méthodes ci-dessus sont des méthodes de base pour utiliser les albums photo, mais dans certaines scénarios commerciaux dont vous pourriez avoir besoin pour mettre en œuvre certaines personnalisations Fonctions définies.

2. La fonction de personnalisation de l'album photo dans uniapp

1. Contrôlez le rapport de mise à l'échelle des photos de l'album

Le rapport de mise à l'échelle par défaut d'uniapp est de 1:1. Parfois, nous devons contrôler le rapport de mise à l'échelle lors de la sélection des images. Vous pouvez définir le nombre et cela est obtenu en utilisant la valeur de l'option de compression dans la fonction de crochet ChooseImage :

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

2. Trier par heure de prise de vue

Dans certaines applications d'album photo, les images seront triées par heure de prise de vue. Uniapp trie par nom de fichier par défaut, vous devez donc implémenter vous-même la logique de tri par heure de prise de vue.

Vous devez d'abord obtenir l'heure de prise de vue de l'image. Vous pouvez utiliser la bibliothèque exif.js pour lire l'heure de prise de vue dans les informations exif de l'image.

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

Ensuite, ajoutez la durée de prise de vue obtenue à un tableau et liez l'index de l'image et la durée de prise de vue ensemble :

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

De cette façon, la fonction de tri par durée de prise de vue peut être réalisée.

3. Sélectionnez plusieurs images et assemblez-les en une seule image

Dans certains scénarios spécifiques, il est nécessaire de permettre aux utilisateurs de sélectionner plusieurs images et de les assembler en une seule image. À ce stade, vous devez utiliser une toile pour assembler plusieurs images.

Tout d'abord, vous devez sélectionner plusieurs images par l'utilisateur et les dessiner sur la toile :

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

Avec le code ci-dessus, vous pouvez regrouper les images sélectionnées en une seule image.

4. Résumé

Grâce à l'introduction de cet article, je pense que vous pouvez déjà comprendre comment personnaliser les albums photo dans uniapp, notamment contrôler le taux de zoom des images, les trier en fonction de l'heure de prise de vue, sélectionner plusieurs images et les assembler en une seule. image.

Pour le développement d'applications mobiles, les albums photo sont une fonction très courante. Maîtriser les compétences de personnalisation des albums photo peut mieux améliorer l'expérience utilisateur de l'application. J'espère que cet article pourra être utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!