小程序 读取照片 EXIF 元信息

安装 exif.js

npm install exif-js --save

UI

<button type="primary" @click="onExif">get exif data</button>

javascript

import EXIF from 'exif-js'

const MB = 1024 * 1024
const sizeLimit = 20 * MB

function chooseImage (count = 9) {
  return new Promise((resolve, reject) => {
    wx.chooseImage({
      count,
      sizeType: ['original'],
      sourceType: ['album', 'camera'],
      success: res => {
        res.tempFiles.every((v, i) => {
          let {size} = v
          if (size > sizeLimit) { reject(new Error(`图片大小应小于 ${sizeLimit}MB`)); return false }
          return true
        })
        resolve(res.tempFiles)
      },
      fail: e => {
        reject(e)
      }
    })
  })
}

async onExif (e) {
  const res = await chooseImage().catch(console.error)
  if (!res) return
  const filePath = res[0].path
  wx.getFileSystemManager().readFile({
    filePath,
    success: res => {
      EXIF.getData(res.data, img => console.print('img:', img))
      const strPretty = EXIF.pretty(res.data)
      console.log('strPretty:', strPretty)
    }
  })
}

直接用会报错：

VM5701:1 thirdScriptError
Cannot read property 'Image' of undefined;at api readFile success callback function
TypeError: Cannot read property 'Image' of undefined
    at Function.global.webpackJsonpMpvue.EXIF.getData (http://127.0.0.1:44195/appservice/common/vendor.js:39035:20)
    at success (http://127.0.0.1:44195/appservice/pages/fuck/main.js:588:82)
    at MC (WAService.js:1:1091186)
    at Function.success (WAService.js:1:1092853)
    at Object.success (WAService.js:1:102995)
    at r (WAService.js:1:433765)
    at WAService.js:1:433947
    at v (WAService.js:1:433951)
    at WAService.js:1:435359
    at t.<anonymous> (http://127.0.0.1:44195/appservice/__dev__/asdebug.js:1:11915)

报错代码段：

    EXIF.getData = function(img, callback) {
        if (((self.Image && img instanceof self.Image)
            || (self.HTMLImageElement && img instanceof self.HTMLImageElement))
            && !img.complete)
            return false;

        if (!imageHasData(img)) {
            getImageData(img, callback);
        } else {
            if (callback) {
                callback.call(img);
            }
        }
        return true;
    }

self 是 undefined, 小程序中没有这个东西，这个 if 判断不重要，我们需要的是让跑到 getImageData(img, callback)

直接删掉这个 if，或者在文件开头添加 var self = window || this;

(function() {

    var debug = false;

    var root = this;
    var self = window || this;

    var EXIF = function(obj) {
        if (obj instanceof EXIF) return obj;
        if (!(this instanceof EXIF)) return new EXIF(obj);
        this.EXIFwrapped = obj;
    };

这下不报错了，可是控制台输出 strPretty 为空，啥也没有啊，EXIF.getData(res.data, img => console.print('img:', img)) 这里的 callbak 也没调到

看逻辑是 getImageData 没有调 callback

我们传入的 img 是一个 ArrayBuffer，所以这函数中的两个 if 都没进去，需要再加个 else if

else if (img instanceof ArrayBuffer) {
            handleBinaryFile(img)
        }

运行小程序，发现又报错了

VM6043:1 thirdScriptError
Blob is not defined;at api readFile success callback function
ReferenceError: Blob is not defined
    at readThumbnailImage (http://127.0.0.1:44195/appservice/common/vendor.js:38781:49)
    at readEXIFData (http://127.0.0.1:44195/appservice/common/vendor.js:38898:29)
    at findEXIFinJPEG (http://127.0.0.1:44195/appservice/common/vendor.js:38510:24)
    at handleBinaryFile (http://127.0.0.1:44195/appservice/common/vendor.js:38429:24)
    at getImageData (http://127.0.0.1:44195/appservice/common/vendor.js:38478:13)
    at Function.global.webpackJsonpMpvue.EXIF.getData (http://127.0.0.1:44195/appservice/common/vendor.js:39044:13)
    at success (http://127.0.0.1:44195/appservice/pages/fuck/main.js:588:82)
    at MC (WAService.js:1:1091186)
    at Function.success (WAService.js:1:1092853)
    at Object.success (WAService.js:1:102995)

没有 Blob，在文件头加上 var Blob = Blob || function () {}, 再次执行，输出结果，搞定！

修改后的 exif.js 代码

这个小程序可以查看照片的EXIF元信息：

------------------ 2021.4.30 更新 ----------------

exif 页面可以正常访问了

------------------ 2021.4.6 更新 ----------------

因为 mpvue 很久没维护了，所以最近对我的小程序代码进行了重写，不再使用任何现成的框架。

目前 exif 页面暂时无法访问