Comment obtenir la direction de l'image dans Uniapp

À mesure que l'utilisation des applications mobiles et leurs capacités continuent de se développer, le besoin de traiter des images devient de plus en plus courant. Un besoin courant est d'obtenir l'orientation d'une image à afficher ou à télécharger. Dans uniapp, nous pouvons utiliser la bibliothèque exif-js pour réaliser cette fonctionnalité.

exif-js est une bibliothèque JavaScript qui permet de lire les métadonnées au format de fichier image échangeable (Exif) des fichiers image. Dans les métadonnées Exif, nous pouvons obtenir les informations d'orientation de l'image. Ces informations nous aident à faire pivoter l'image dans la bonne orientation pour un meilleur affichage ou un meilleur téléchargement.

Dans uniapp, nous pouvons utiliser l'API uni.getImageInfo pour obtenir des informations sur les images, y compris les métadonnées Exif.

Les étapes de base pour obtenir l'orientation de l'image sont les suivantes :

1. Utilisez l'API uni.chooseImage pour sélectionner l'image.

2. Utilisez l'API uni.getImageInfo pour obtenir des informations sur l'image, qui contiennent les métadonnées Exif de l'image.

3. Utilisez la bibliothèque exif-js pour analyser les métadonnées Exif et obtenir des informations de direction.

4. Ajustez l'orientation de l'image en fonction des informations d'orientation.

Voici un exemple de code :

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

Dans le code ci-dessus, la méthode ChooseImage sélectionne l'image. Une fois l'image sélectionnée, la méthode getImageOrientation est appelée pour obtenir l'orientation de l'image. Dans la méthode getImageOrientation, utilisez l'API uni.getImageInfo pour obtenir des informations sur l'image et appelez la méthode getOrientationFromExif pour obtenir les informations d'orientation de l'image. Ensuite, ajustez l'orientation de l'image en fonction des informations d'orientation.

En bref, la coopération d'exif-js et de l'API liée aux images uniapp peut très facilement obtenir les informations de direction de l'image et assurer l'affichage et le téléchargement normaux de l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!