uniapp에서 사진 앨범을 사용자 정의하는 방법

모바일 기기의 대중화와 함께 사진 앨범은 휴대전화 사용자의 삶에서 없어서는 안 될 부분이 되었습니다. 애플리케이션 개발 시 사진 앨범을 사용자 정의하는 방법은 무엇입니까? 이 글에서는 uniapp에서 사진 앨범을 맞춤 설정하는 방법을 소개합니다.

1. uniapp에서 사진 앨범의 기본 사용

uniapp에서 사진 앨범을 사용하는 두 가지 기본 방법이 있습니다.

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.uniapp의 사진 앨범 맞춤 기능

1. 앨범 사진의 크기 조정 비율을 제어합니다.

uniapp의 기본 크기 비율은 1:1입니다. 개수를 설정할 수 있으며 이는 chooseImage 후크 기능의 압축 옵션 값을 사용하여 수행됩니다.

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

2. 촬영 시간별 정렬

일부 사진 앨범 응용 프로그램에서는 사진이 촬영 시간별로 정렬됩니다. 유니앱은 기본적으로 파일명순으로 정렬하기 때문에 촬영시간별로 정렬하는 로직을 직접 구현해 주셔야 합니다.

먼저 사진의 촬영 시간을 가져와야 합니다. 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. 여러 장의 사진을 선택하여 하나의 그림으로 연결

일부 특정 시나리오에서는 사용자가 여러 장의 사진을 선택하여 하나의 그림으로 연결하도록 허용해야 합니다. 이때 여러 장의 사진을 연결하려면 캔버스를 사용해야 합니다.

먼저 사용자가 선택한 여러 장의 사진을 가져와서 캔버스에 그려야 합니다.

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

위 코드를 사용하면 선택한 사진을 하나의 사진으로 연결할 수 있습니다.

4. 요약

이 글의 소개를 통해 사진의 확대/축소 비율 제어, 촬영 시간에 따른 정렬, 여러 장의 사진 선택 및 하나로 합치기 등 uniapp에서 사진 앨범을 맞춤 설정하는 방법을 이미 이해하셨으리라 믿습니다. 그림.

모바일 애플리케이션 개발에서 사진 앨범은 매우 일반적인 기능입니다. 사진 앨범의 사용자 정의 기술을 익히면 애플리케이션의 사용자 경험을 더 향상시킬 수 있습니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

위 내용은 uniapp에서 사진 앨범을 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!