前端獲取圖片exif信息

對又是我，天天都有新的需求。

此次的需求是上傳圖片的時獲取圖片的寬高、設備、光圈等信息。

不用考慮服務端作，他們確定是不作。

pc、android、ios 都支持了，如今就缺乏 web 這邊上傳的圖片了。

廢話不對說，上測試地址：https://www.lilnong.top/static/html/exif.html

獲取圖片寬高

img = new Image();
img.src = URL.createObjectURL(file)
img.onload = function(){
    console.log(img.naturalWidth || img.width)
}

1. URL.createObjectURL 能夠把 input 選擇的文件轉換爲一個 url。
2. 咱們使用 img 標籤來加載圖片。
3. 獲取圖片寬高須要 onload 以後，才能獲取。

獲取 Exif 信息

使用的庫是 exif-js。
提供了 JavaScript 讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。

使用方法

EXIF.getData(file, function(){
    console.log('getData', this);
    // 這裏面能夠看到值，想要什麼直接獲取便可。
    console.log('getAllTags', EXIF.getAllTags(this));
});

拍攝方向

正好前兩天在看這方面的知識，也順便貼一下。

圖片Exif 信息中Orientation的理解和對此的處理

微信公衆號：前端linong