So ermitteln Sie die Richtung des Bildes in Uniapp

Da die Nutzung mobiler Anwendungen und deren Möglichkeiten immer weiter zunimmt, wird die Notwendigkeit, Bilder zu verarbeiten, immer häufiger. Ein häufiger Bedarf besteht darin, die Ausrichtung eines Bildes zu ermitteln, das angezeigt oder hochgeladen werden soll. In uniapp können wir die exif-js-Bibliothek verwenden, um diese Funktionalität zu erreichen.

exif-js ist eine JavaScript-Bibliothek, die das Lesen der Exif-Metadaten (Exchangeable Image File Format) von Bilddateien ermöglicht. In Exif-Metadaten können wir die Ausrichtungsinformationen des Bildes abrufen. Diese Informationen helfen uns, das Bild in die richtige Ausrichtung zu drehen, damit es besser angezeigt oder hochgeladen werden kann.

In uniapp können wir die uni.getImageInfo-API verwenden, um Bildinformationen, einschließlich Exif-Metadaten, abzurufen.

Die grundlegenden Schritte zum Ermitteln der Bildausrichtung sind wie folgt:

1. Verwenden Sie die uni.chooseImage-API, um das Bild auszuwählen.

2. Verwenden Sie die uni.getImageInfo-API, um Bildinformationen abzurufen, die die Exif-Metadaten des Bildes enthalten.

3. Verwenden Sie die exif-js-Bibliothek, um Exif-Metadaten zu analysieren und Richtungsinformationen zu erhalten.

4. Passen Sie die Ausrichtung des Bildes basierend auf den Ausrichtungsinformationen an.

Hier ist ein Beispielcode:

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

Im obigen Code wählt die Methode ChooseImage das Bild aus. Sobald das Bild ausgewählt ist, wird die Methode getImageOrientation aufgerufen, um die Ausrichtung des Bildes zu ermitteln. Verwenden Sie in der Methode getImageOrientation die API uni.getImageInfo, um Bildinformationen abzurufen, und rufen Sie die Methode getOrientationFromExif auf, um die Ausrichtungsinformationen des Bildes abzurufen. Passen Sie dann die Ausrichtung des Bildes basierend auf den Ausrichtungsinformationen an.

Kurz gesagt, durch die Zusammenarbeit von exif-js und der bildbezogenen Uniapp-API können die Richtungsinformationen des Bildes problemlos abgerufen und die normale Anzeige und das Hochladen des Bildes sichergestellt werden.

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die Richtung des Bildes in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!