How to get the direction of the picture in uniapp

As the use of mobile applications and their capabilities continue to expand, the need to process images is becoming more and more common. A common need is to get the orientation of an image to be displayed or uploaded. In uniapp, we can use exif-js library to achieve this functionality.

exif-js is a JavaScript library that allows reading the Exchangeable image file format (Exif) metadata of image files. In Exif metadata, we can get the orientation information of the image. This information helps us rotate the image to the correct orientation for better display or uploading.

In uniapp, we can use the uni.getImageInfo API to obtain image information, including Exif metadata.

The basic steps to obtain the image direction are as follows:

1. Use the uni.chooseImage API to select the image.

2. Use the uni.getImageInfo API to obtain image information, which contains the Exif metadata of the image.

3. Use the exif-js library to parse Exif metadata and obtain direction information.

4. Adjust the direction of the image based on the direction information.

The following is a sample code:

<template>
  <div class="container">
    <div class="preview" :class="{ 'landscape': landscape }">
      <img  src="/static/imghwm/default1.png"  data-src="imageSrc"  class="lazy"  : :  style="max-width:90%"transform': 'rotate(' + rotationAngle + 'deg)' }" alt="How to get the direction of the picture in uniapp" >
    </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>

In the above code, the chooseImage method selects the image. Once the image is selected, the getImageOrientation method is called to get the orientation of the image. In the getImageOrientation method, use the uni.getImageInfo API to obtain image information, and call the getOrientationFromExif method to obtain the orientation information of the image. Then, adjust the orientation of the image based on the orientation information.

In short, the cooperation of exif-js and uniapp image-related API can easily obtain the direction information of the image and ensure the normal display and upload of the image.

The above is the detailed content of How to get the direction of the picture in uniapp. For more information, please follow other related articles on the PHP Chinese website!