小程序读取照片 EXIF 元信息

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

安装 exif.js

npm install exif-js --save

<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元信息：