安裝 （exif官方地址）

yarn add exif-js

vue頁面內(nèi)調(diào)用

<template>
  <div>
    <div>
      <img id="img1" src="../../src/assets/images/11.jpg">
    </div>
    <div id="showInfo"></div>
  </div>
</template>
import EXIF from 'exif-js'
export default {
  ...
  mounted () {
    this.getOrientation ()
  },
  methods: {
    // 獲取圖片方向值
    getOrientation () {
      window.onload = () => {
        var img1 = document.getElementById('img1')
            EXIF.getData(img1, function() {
            var make = EXIF.getTag(this, 'Make')  // 手機品牌
            var model = EXIF.getTag(this, 'Model') // 手機型號
            var orientation = EXIF.getTag(this, 'Orientation') // 圖片方向
            var showInfo = document.getElementById('showInfo')
            showInfo.innerHTML = `${make} ${model} ${orientation}`
        })
      }
    }
  }
}

當我們拿到手機品牌、型號還有手機方向后，就可以做一些我們想要做的事情了。

API 方法

EXIF.getData(img, callback) 獲取圖像的數(shù)據(jù)

能兼容尚未支持提供 EXIF 數(shù)據(jù)的瀏覽器獲取到元數(shù)據(jù)。

EXIF.getTag(img, tag)   獲取圖像的某個數(shù)據(jù)
EXIF.getAllTags(img)    獲取圖像的全部數(shù)據(jù)，值以對象的方式返回
EXIF.pretty(img)    獲取圖像的全部數(shù)據(jù)，值以字符串的方式返回

exif相關(guān)：

ExifVersion Exif 版本
FlashPixVersion FlashPix 版本
ColorSpace  色域、色彩空間
PixelXDimension 圖像的有效寬度
PixelYDimension 圖像的有效高度
ComponentsConfiguration 圖像構(gòu)造
CompressedBitsPerPixel  壓縮時每像素色彩位
MakerNote   制造商設(shè)置的信息
UserComment 用戶評論
RelatedSoundFile    關(guān)聯(lián)的聲音文件
DateTimeOriginal    創(chuàng)建時間
DateTimeDigitized   數(shù)字化創(chuàng)建時間
SubsecTime  日期時間（秒）
SubsecTimeOriginal  原始日期時間（秒）
SubsecTimeDigitized 原始日期時間數(shù)字化（秒）
ExposureTime    曝光時間
FNumber 光圈值
ExposureProgram 曝光程序
SpectralSensitivity 光譜靈敏度
ISOSpeedRatings 感光度
OECF    光電轉(zhuǎn)換功能
ShutterSpeedValue   快門速度
ApertureValue   鏡頭光圈
BrightnessValue 亮度
ExposureBiasValue   曝光補償
MaxApertureValue    最大光圈
SubjectDistance 物距
MeteringMode    測光方式
Lightsource 光源
Flash   閃光燈
SubjectArea 主體區(qū)域
FocalLength 焦距
FlashEnergy 閃光燈強度
SpatialFrequencyResponse    空間頻率反應(yīng)
FocalPlaneXResolution   焦距平面X軸解析度
FocalPlaneYResolution   焦距平面Y軸解析度
FocalPlaneResolutionUnit    焦距平面解析度單位
SubjectLocation 主體位置
ExposureIndex   曝光指數(shù)
SensingMethod   圖像傳感器類型
FileSource  源文件
SceneType   場景類型（1 == 直接拍攝）
CFAPattern  CFA 模式
CustomRendered  自定義圖像處理
ExposureMode    曝光模式
WhiteBalance    白平衡（1 == 自動，2 == 手動）
DigitalZoomRation   數(shù)字變焦
FocalLengthIn35mmFilm   35毫米膠片焦距
SceneCaptureType    場景拍攝類型
GainControl 場景控制
Contrast    對比度
Saturation  飽和度
Sharpness   銳度
DeviceSettingDescription    設(shè)備設(shè)定描述
SubjectDistanceRange    主體距離范圍
InteroperabilityIFDPointer  
ImageUniqueID   圖像唯一ID

Tiff 相關(guān):

ImageWidth  圖像寬度
ImageHeight 圖像高度
BitsPerSample   比特采樣率
Compression 壓縮方法
PhotometricInterpretation   像素合成
Orientation 拍攝方向
SamplesPerPixel 像素數(shù)
PlanarConfiguration 數(shù)據(jù)排列
YCbCrSubSampling    色相抽樣比率
YCbCrPositioning    色相配置
XResolution X方向分辨率
YResolution Y方向分辨率
ResolutionUnit  分辨率單位
StripOffsets    圖像資料位置
RowsPerStrip    每帶行數(shù)
StripByteCounts 每壓縮帶比特數(shù)
JPEGInterchangeFormat   JPEG SOI 偏移量
JPEGInterchangeFormatLength JPEG 比特數(shù)
TransferFunction    轉(zhuǎn)移功能
WhitePoint  白點色度
PrimaryChromaticities   主要色度
YCbCrCoefficients   顏色空間轉(zhuǎn)換矩陣系數(shù)
ReferenceBlackWhite 黑白參照值
DateTime    日期和時間
ImageDescription    圖像描述、來源
Make    生產(chǎn)者
Model   型號
Software    軟件
Artist  作者
Copyright   版權(quán)信息

GPS 相關(guān)：

GPSVersionID    GPS 版本
GPSLatitudeRef  南北緯
GPSLatitude 緯度
GPSLongitudeRef 東西經(jīng)
GPSLongitude    經(jīng)度
GPSAltitudeRef  海拔參照值
GPSAltitude 海拔
GPSTimeStamp    GPS 時間戳
GPSSatellites   測量的衛(wèi)星
GPSStatus   接收器狀態(tài)
GPSMeasureMode  測量模式
GPSDOP  測量精度
GPSSpeedRef 速度單位
GPSSpeed    GPS 接收器速度
GPSTrackRef 移動方位參照
GPSTrack    移動方位
GPSImgDirectionRef  圖像方位參照
GPSImgDirection 圖像方位
GPSMapDatum 地理測量資料
GPSDestLatitudeRef  目標緯度參照
GPSDestLatitude 目標緯度
GPSDestLongitudeRef 目標經(jīng)度參照
GPSDestLongitude    目標經(jīng)度
GPSDestBearingRef   目標方位參照
GPSDestBearing  目標方位
GPSDestDistanceRef  目標距離參照
GPSDestDistance 目標距離
GPSProcessingMethod GPS 處理方法名
GPSAreaInformation  GPS 區(qū)功能變數(shù)名
GPSDateStamp    GPS 日期
GPSDifferential GPS 修正