前端获取图片exif流信息

简介: 如果你是为了获取 exif 解析后的信息,那么你可以看这篇 前端获取图片exif信息,通过 exif-js 来获取的。看到这里你要懵了,我为什么又要写一遍。emmmm...因为我需求变了,直接拿到 exif 部分的数据,然后 base64 提交。测试地址

什么是 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 的标志位


bVbGIYO.webp.jpg


前面我们介绍了 Exif 信息以 0xFFE1 作为开头标记。

所以我们直接找这个信息


bVbGIYY.webp.jpg


将 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(''))
    }
}


bVbGIZC.webp.jpg

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
3月前
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
108 0
|
5月前
|
前端开发
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
55 0
|
5天前
|
NoSQL JavaScript 前端开发
报错场景:ant design vue前端登录时,输入的验证码是对的,但是一直提上验证码错误,登录不进去 报错信息(Error in execution; nested exception)
报错场景:ant design vue前端登录时,输入的验证码是对的,但是一直提上验证码错误,登录不进去 报错信息(Error in execution; nested exception)
18 0
|
6月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
52 0
|
6月前
|
前端开发 Java 程序员
Spring Boot+Netty+Websocket实现后台向前端推送信息
学过 Netty 的都知道,Netty 对 NIO 进行了很好的封装,简单的 API,庞大的开源社区。深受广大程序员喜爱。基于此本文分享一下基础的 netty 使用。实战制作一个 Netty + websocket 的消息推送小栗子。
|
5月前
|
前端开发
后台添加菜单信息如何在前端循环遍历?
后台添加菜单信息如何在前端循环遍历?
22 0
|
7月前
|
前端开发 API
前端也能获取电池信息,5分钟带你了解奇奇怪怪的知识点
前端也能获取电池信息,5分钟带你了解奇奇怪怪的知识点
31 0
|
7月前
|
前端开发 JavaScript API
TienChin 渠道管理-前端展示渠道信息
TienChin 渠道管理-前端展示渠道信息
29 0
TienChin 渠道管理-前端展示渠道信息
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-信息列表页实现1
前端学习笔记202305学习笔记第二十二天-信息列表页实现1
52 0