So passen Sie Fotoalben in Uniapp an

Mit der Popularität mobiler Geräte sind Fotoalben zu einem unverzichtbaren Bestandteil im Leben von Mobiltelefonnutzern geworden. Wie kann man in der Anwendungsentwicklung Fotoalben anpassen? In diesem Artikel erfahren Sie, wie Sie Fotoalben in uniapp anpassen.

1. Grundlegende Verwendung von Fotoalben in Uniapp

Es gibt zwei grundlegende Möglichkeiten, Fotoalben in Uniapp zu verwenden:

1. Konfigurieren Sie Berechtigungen in der Datei manifest.json und verwenden Sie die Methode uni.chooseImage(), um das Fotoalbum aufzurufen :

//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. Fügen Sie der Vorlage das Tag hinzu und rufen Sie das Bild über das fileChange-Ereignis ab:

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

Die beiden oben genannten Methoden sind grundlegende Methoden zur Verwendung von Fotoalben, in einigen jedoch In Geschäftsszenarien müssen Sie möglicherweise einige Anpassungen definieren. Definierte Funktionen.

2. Die Anpassungsfunktion des Fotoalbums in uniapp

1. Kontrollieren Sie das Skalierungsverhältnis der Albumbilder

Das Standard-Skalierungsverhältnis von uniapp ist 1:1. Manchmal müssen wir das Skalierungsverhältnis bei der Auswahl von Bildern kontrollieren. Sie können die Anzahl festlegen und dies wird erreicht, indem Sie den Wert der Komprimierungsoption in der Hook-Funktion „Bild wählen“ verwenden:

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

2. Nach Aufnahmezeit sortieren

In einigen Fotoalbumanwendungen werden die Bilder nach der Aufnahmezeit sortiert. Uniapp sortiert standardmäßig nach Dateinamen, daher müssen Sie die Sortierlogik nach Aufnahmezeit selbst implementieren.

Zuerst müssen Sie die Aufnahmezeit des Bildes ermitteln. Sie können die Aufnahmezeit in den Exif-Informationen des Bildes mithilfe der exif.js-Bibliothek ablesen.

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

Fügen Sie dann die erhaltene Aufnahmezeit zu einem Array hinzu und verknüpfen Sie den Bildindex und die Aufnahmezeit miteinander:

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

Auf diese Weise kann die Funktion des Sortierens nach Aufnahmezeit implementiert werden.

3. Wählen Sie mehrere Bilder aus und fügen Sie sie zu einem Bild zusammen.

In einigen bestimmten Szenarien ist es erforderlich, Benutzern die Auswahl mehrerer Bilder und das Zusammenfügen zu einem Bild zu ermöglichen. Zu diesem Zeitpunkt müssen Sie eine Leinwand verwenden, um mehrere Bilder zusammenzufügen.

Zunächst müssen Sie mehrere Bilder vom Benutzer auswählen und auf die Leinwand zeichnen:

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

Mit dem obigen Code können Sie die ausgewählten Bilder zu einem Bild zusammenfügen.

4. Zusammenfassung

Durch die Einleitung dieses Artikels können Sie meiner Meinung nach bereits verstehen, wie Sie Fotoalben in uniapp anpassen, einschließlich der Steuerung des Zoomverhältnisses von Bildern, der Sortierung nach Aufnahmezeit, der Auswahl mehrerer Bilder und deren Zusammenfügung Bild.

Bei der Entwicklung mobiler Anwendungen sind Fotoalben eine sehr häufige Funktion. Durch die Beherrschung der Anpassungsfähigkeiten von Fotoalben kann die Benutzererfahrung der Anwendung besser verbessert werden. Ich hoffe, dass dieser Artikel für alle hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonSo passen Sie Fotoalben in Uniapp an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!