JS小分享｜EXIF取得你的照片資訊+旋轉IOS的照片預設角度！

在使用相片來做為互動網頁的功能，如果碰上了需要得知照片拍攝的時間點是否為當下指定時間範圍內或是相片上傳到網頁上後方向是不對的時候，使用EXIF就可以幫我們讀取選擇的照片資訊囉！

exif-js/exif-js

Step1. EXIF的使用方法

1. 引入EXIF

1.使用js引入
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
或是
2.使用npm安裝
npm install exif-js --save

2. 呼叫EXIF

*在這個例子中我加入了簡單的小範例，取得照片的拍攝角度後旋轉成正向的編碼
function getExif(_this) {
   if (_this.files && _this.files[0]) {
      var reader = new FileReader();
      EXIF.getData(_this.files[0], function() {
           //取得照片拍攝的角度
           var orientation = EXIF.getTag(this, 'Orientation');
      });
      reader.onload = function(e) {
          var rotateAngle = 0;
          if(orientation == 6 || orientation == 8|| orientation == 3){
              switch(orientation){
                 case 3:
                    rotateAngle = 180;
                    break;
                 case 6:
                    rotateAngle = 90;
                    break;
                 case 8:
                    rotateAngle = -90;
                    break;
              }
          }
      }
      reader.readAsDataURL(_this.files[0]);
   }
}
orientation有8種回傳值，分別為：
1.水平照片                    5.水平且順時鐘旋轉270°
2.水平鏡像                    6.順時鐘旋轉270°
3.照片順時鐘旋轉180°           7.水平且順時鐘旋轉90°
4.垂直鏡像                    8.照片順時鐘旋轉90度
以現在行動裝置上，最常用使用到的是：3.6.8，這三個回傳值

3. 更多EXIF的功能

1.取得照片的數據：EXIF.getData(img, callback)
2.取得照片的某個指定參數數據：EXIF.getTag(img, tag)
3.取得照片的全部數據，值以參數的方式返回：EXIF.getAllTags(img)
4.取得照片的全部數據，值以字符串的方式返回：EXIF.pretty(img)

Step2. 關於 EXIF 4個常用的參數

1. Orientation：照片拍攝角度
2. DateTime：照片拍攝時間
3. ImageWidth：照片寬度
4. ImageHeight：照片高度

呼叫EXIF參數的使用方式是

EXIF.getData(_this.files[0], function(e) {
   var orientation = EXIF.getTag(this, 'Orientation');
});

呼叫TIFF的使用方式是

EXIF.getData(_this.files[0], function(e) {
   var photo_time = this.exifdata.DateTime;
});

其他更詳細的參數可以到下方的連結中查看：

Exif.js 读取图像的元数据 - 前端开发仓库

最後，我在下方附上了簡單的範本，也加上獲取照片的角度，讓照片可以旋轉成正向角度，有需要的學習者也可以參考看看，那我們下篇再敘吧~