Bagaimana untuk menyesuaikan album foto dalam uniapp

Dengan populariti peranti mudah alih, album foto telah menjadi bahagian yang amat diperlukan dalam kehidupan pengguna telefon mudah alih. Dalam pembangunan aplikasi, bagaimana untuk menyesuaikan album foto? Artikel ini akan memperkenalkan anda kepada cara menyesuaikan album foto dalam uniapp.

1. Penggunaan asas album foto dalam uniapp

Terdapat dua cara asas untuk menggunakan album foto dalam uniapp:

1. Konfigurasikan kebenaran dalam fail manifest.json , gunakan Kaedah uni.chooseImage() memanggil album foto:

//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. Tambah teg acara:

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

Dua kaedah di atas ialah cara asas untuk menggunakan album foto, tetapi dalam sesetengah senario perniagaan, beberapa fungsi tersuai mungkin perlu dilaksanakan.

2. Fungsi penyesuaian album foto dalam uniapp

1. Kawal nisbah penskalaan gambar album

Nisbah penskalaan lalai uniapp ialah 1:1 , terdapat Kadangkala kita perlu mengawal nisbah zum apabila memilih imej Ini boleh dicapai dengan menetapkan nilai pilihan mampat dalam kiraan dan pilih Fungsi cangkuk imej:

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

2. Isih mengikut masa penangkapan<. 🎜>

Dalam sesetengah aplikasi album foto, gambar disusun mengikut masa ia diambil. Uniapp mengisih mengikut nama fail secara lalai, jadi anda perlu melaksanakan logik pengisihan mengikut masa penangkapan sendiri.

Mula-mula anda perlu mendapatkan masa penangkapan gambar Anda boleh menggunakan perpustakaan exif.js untuk membaca masa penangkapan dalam maklumat exif gambar.

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

Seterusnya, tambahkan masa penangkapan yang diperoleh pada tatasusunan, dan ikat indeks imej dan masa penangkapan bersama-sama:

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

Dengan cara ini anda boleh mengisih mengikut masa penangkapan Berfungsi.

Pilih berbilang gambar dan cantumkannya menjadi satu gambar

Dalam beberapa senario tertentu, adalah perlu untuk membenarkan pengguna memilih berbilang gambar dan mencantumkannya ke dalam satu gambar. Pada masa ini, anda perlu menggunakan kanvas untuk mencantumkan berbilang gambar.

Pertama, anda perlu mendapatkan berbilang gambar yang dipilih oleh pengguna dan melukisnya di atas kanvas:

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

Dengan kod di atas, anda boleh menyambung gambar yang dipilih menjadi satu gambar.

4. Ringkasan

Melalui pengenalan artikel ini, saya percaya anda sudah boleh memahami cara menyesuaikan album foto dalam uniapp, termasuk mengawal nisbah zum gambar, menyusun mengikut masa penangkapan, berbilang pemilihan gambar dan dicantumkan menjadi satu gambar.

Untuk membangunkan aplikasi mudah alih, album foto adalah fungsi yang sangat biasa Menguasai kemahiran penyesuaian album foto boleh meningkatkan pengalaman pengguna aplikasi dengan lebih baik. Saya harap artikel ini dapat membantu semua orang.

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan album foto dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!