Bagaimana untuk mendapatkan arah gambar dalam uniapp

Memandangkan penggunaan aplikasi mudah alih dan keupayaannya terus berkembang, keperluan untuk memproses imej menjadi semakin biasa. Keperluan biasa adalah untuk mendapatkan orientasi imej untuk dipaparkan atau dimuat naik. Dalam uniapp, kita boleh menggunakan perpustakaan exif-js untuk mencapai fungsi ini.

exif-js ialah pustaka JavaScript yang membenarkan membaca metadata fail imej format fail imej boleh tukar (Exif). Dalam metadata Exif, kita boleh mendapatkan maklumat orientasi imej. Maklumat ini membantu kami memutarkan imej ke orientasi yang betul untuk paparan atau muat naik yang lebih baik.

Dalam uniapp, kami boleh menggunakan API uni.getImageInfo untuk mendapatkan maklumat imej, termasuk metadata Exif.

Langkah asas untuk mendapatkan orientasi imej adalah seperti berikut:

1 Gunakan API uni.chooseImage untuk memilih imej.

2 Gunakan API uni.getImageInfo untuk mendapatkan maklumat imej, yang mengandungi metadata Exif bagi imej.

3. Gunakan perpustakaan exif-js untuk menghuraikan metadata Exif dan mendapatkan maklumat arah.

4. Laraskan arah imej berdasarkan maklumat arah.

Berikut ialah contoh kod:

<template>
  <div class="container">
    <div class="preview" :class="{ 'landscape': landscape }">
      <img :src="imageSrc" :style="{ 'transform': 'rotate(' + rotationAngle + 'deg)' }">
    </div>
  </div>
</template>

<script>
import ExifParser from 'exif-js';

export default {
  data() {
    return {
      imageSrc: '',
      landscape: false,
      rotationAngle: 0,
    };
  },
  methods: {
    // 选择图像
    chooseImage() {
      uni.chooseImage({
        success: (res) => {
          this.imageSrc = res.tempFilePaths[0];
          this.getImageOrientation(); // 获取图像方向
        },
      });
    },

    // 获取图像方向
    getImageOrientation() {
      uni.getImageInfo({
        src: this.imageSrc,
        success: (res) => {
          const imageWidth = res.width;
          const imageHeight = res.height;
          const orientation = this.getOrientationFromExif(res);

          // 调整图像
          switch (orientation) {
            case 1:
              // 正常方向，无需调整
              break;
            case 2:
              // 水平翻转
              break;
            case 3:
              // 顺时针180度
              this.rotationAngle = 180;
              break;
            case 4:
              // 垂直翻转
              break;
            case 5:
              // 顺时针旋转90度，然后水平翻转
              this.rotationAngle = -90;
              this.landscape = true;
              break;
            case 6:
              // 顺时针旋转90度
              this.rotationAngle = 90;
              break;
            case 7:
              // 逆时针旋转90度，然后水平翻转
              this.rotationAngle = 90;
              this.landscape = true;
              break;
            case 8:
              // 逆时针旋转90度
              this.rotationAngle = -90;
              break;
            default:
              break;
          }
        },
      });
    },

    // 从Exif获取图像方向
    getOrientationFromExif(imageInfo) {
      const exifData = ExifParser.readFromBinaryFile(imageInfo.path);
      return exifData.Orientation || 1;
    },
  },
};
</script>

Dalam kod di atas, kaedah chooseImage memilih imej. Setelah imej dipilih, kaedah getImageOrientation dipanggil untuk mendapatkan orientasi imej. Dalam kaedah getImageOrientation, gunakan API uni.getImageInfo untuk mendapatkan maklumat imej dan panggil kaedah getOrientationFromExif untuk mendapatkan maklumat orientasi imej. Kemudian, laraskan orientasi imej berdasarkan maklumat orientasi.

Ringkasnya, kerjasama exif-js dan API berkaitan imej uniapp boleh mendapatkan maklumat arah imej dengan mudah dan memastikan paparan biasa dan muat naik imej.

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