前端获取图片 exif 流信息

如果你是为了获取 exif 解析后的信息，那么你可以看这篇 前端获取图片exif信息，通过 exif-js 来获取的。

看到这里你要懵逼了，我为什么又要写一遍。emmmm...因为我需求变了，直接拿到 exif 部分的数据，然后 base64 提交。（giao） 测试地址

什么是 exif

可交换图像文件格式（英语：Exchangeable image file format，官方简称 Exif），是专门为数码相机的照片设定的，可以记录数码照片的属性信息和拍摄数据。

exif 格式规则

Exif 信息以 0xFFE1 作为开头标记，后两个字节表示 Exif 信息的长度。所以 Exif 信息最大为64 kb，而内部采用 TIFF 格式。

基于这样的规则，那其实我要获取 exif 信息的串就很简单了。

伪代码实现，反正跑不起来

// 获取开始标记
ffe1_idx = blob.indexOf('ffe1');
// 截取后两个字节,用来当长度
exifLength = blob.slice(ffe1_idx, ffe1_idx + 2)
// 截取出exif
exif = blob.slice(ffe1_idx, ffe1_idx + exifLength)
// exif 处理成 base64
btoa(exif)

实现获取 exif 并 base64 编码

我是基于 exif.js，使用了他内部的错误控制。

判断类型

因为 exif 是用于记录数码照片的属性信息和拍摄数据，所以需要是 JPEG

if ((dataView.getUint8(0) != 0xFF) || 
        (dataView.getUint8(1) != 0xD8)) {
    console.log("Not a valid JPEG");
    return { 
        state: 1001, 
        message: 'not a valid jpeg' 
    };
}

查找 Exif 的标志位

前面我们介绍了 Exif 信息以 0xFFE1 作为开头标记。
所以我们直接找这个信息

将 arrayBuffer 数据以 Uint8 解析并展示 Array.from(new Uint8Array(temp1)).map(v=>[v, v.toString(16).padStart(2, '0'), String.fromCharCode(v)])

var offset = 2, //头两位是类型标记所以跳过
    length = file.byteLength, //文件长度
    marker;
while (offset < length) {
    if (dataView.getUint8(offset) != 0xFF) {
        if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset));
        return { state: 1002, message: 'not a valid marker, something is wrong' };
    }
    marker = dataView.getUint8(offset + 1);
    if (debug) console.log(marker);
    if (marker == 225) {
        if (debug) console.log("Found 0xFFE1 marker");
        return readEXIFData(
            dataView, // 数据源
            offset + 4 //跳过 0xffe1 和 长度位
    } else {
        offset += 2 + dataView.getUint16(offset + 2);
    }
}

解析 exif

function readEXIFData(file, start) {
    // 判断是不是 exif 信息，开头应该是字符串 Exif
    if (getStringFromDB(file, start, 4) != "Exif") {
        if (debug) console.log("Not valid EXIF data! " + getStringFromDB(file, start, 4));
        return { state: 1003, message: "Not valid EXIF data! " + getStringFromDB(file, start, 4) };
    }
    // 判断是大数结尾还是小数结尾。
    var bigEnd,
        tiffOffset = start + 6;
    if (file.getUint16(tiffOffset) == 0x4949) {
        bigEnd = false;
    } else if (file.getUint16(tiffOffset) == 0x4D4D) {
        bigEnd = true;
    } else {
        if (debug) console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)");
        return { state: 1004, message: "Not valid TIFF data! (no 0x4949 or 0x4D4D)" };
    }

    if (file.getUint16(tiffOffset + 2, !bigEnd) != 0x002A) {
        if (debug) console.log("Not valid TIFF data! (no 0x002A)");
        return { state: 1005, message: "Not valid TIFF data! (no 0x002A)" };
    }

    var firstIFDOffset = file.getUint32(tiffOffset + 4, !bigEnd);
    if (firstIFDOffset < 0x00000008) {
        if (debug) console.log("Not valid TIFF data! (First offset less than 8)", file.getUint32(tiffOffset + 4, !bigEnd));
        return { state: 1006, message: "Not valid TIFF data! (First offset less than 8)" };
    }
    // 截取，这里代码讲道理还是可以优化的。
    var _start = tiffOffset - 10;
    var _end = parseInt(Array.from(new Uint8Array(file.buffer.slice(start-2,start))).map(v=>v.toString(16)).join(''), 16)+start-2
    return {
        state: 1000,
        data: btoa(Array.from(new Uint8Array(file.buffer.slice(_start, _end))).map(v => String.fromCharCode(v)).join(''))
    }

}

微信公众号：前端linong

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。