uniappで写真の方向を取得する方法

モバイル アプリケーションの使用とその機能が拡大し続けるにつれて、画像を処理する必要性がますます一般的になってきています。一般的なニーズは、表示またはアップロードする画像の向きを取得することです。 uniapp では、exif-js ライブラリを使用してこの機能を実現できます。

exif-js は、画像ファイルの Exchangeable image file format (Exif) メタデータを読み取ることができる JavaScript ライブラリです。 Exifメタデータでは画像の向き情報を取得できます。この情報は、表示やアップロードを改善するために画像を正しい方向に回転するのに役立ちます。

uniapp では、uni.getImageInfo API を使用して、Exif メタデータを含む画像情報を取得できます。

画像の方向を取得する基本的な手順は次のとおりです:

1. uni.chooseImage API を使用して画像を選択します。

2. uni.getImageInfo API を使用して、画像の Exif メタデータを含む画像情報を取得します。

3. exif-js ライブラリを使用して Exif メタデータを解析し、方向情報を取得します。

4. 方向情報に基づいて画像の方向を調整します。

以下はサンプル コードです:

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

上記のコードでは、chooseImage メソッドが画像を選択します。画像が選択されると、getImageOrientation メソッドが呼び出され、画像の向きが取得されます。 getImageOrientation メソッドでは、uni.getImageInfo API を使用して画像情報を取得し、getOrientationFromExif メソッドを呼び出して画像の向き情報を取得します。次に、向き情報に基づいて画像の向きを調整します。

つまり、exif-jsとuniappの画像関連APIを連携させることで、画像の方向情報を簡単に取得し、画像を正常に表示・アップロードできるようになります。

以上がuniappで写真の方向を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。