html5 判断图片 exif,前端获取图片 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
欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。
html5 判断图片 exif,前端获取图片 exif 流信息相关推荐
- 前端获取图片exif信息
对又是我,每天都有新的需求.这次的需求是上传图片的时获取图片的宽高.设备.光圈等信息. 不用考虑服务端做,他们肯定是不做.pc.android.ios 都支持了,现在就缺少 web 这边上传的图片了. ...
- 前端获取图片压缩后上传给后台
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
- Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
- springboot获取静态图片路径_Springboot通过图片路径形式获取图片
Springboot通过图片路径形式获取图片 一致以来都是用 http://127.0.0.1:8888/getPhoto?imgUrl=1.jpg 的形式获取数据,今天突然要 http://127. ...
- 前端获取图片宽高的几种方法
有时候动态加载图片,会因为图片宽高导致显示拉伸情况,如果能根据图片URL地址获取到图片的宽高,再进行渲染,就可以了,以下两种方案供参考: 方法一: // 图片地址 var imgUrl = " ...
- android 图片拍照,Android获取图片拍照时间
为什么写这篇文章是因为今早有个需求需要获取图片拍照时的时间进行一些处理,有些方法参数名忘记了,所以谷歌百度了一下,Android 图片 时间,Android 图片 拍照 时间,这几个关键字居然无法搜索 ...
- 图片管理之获取图片列表数据
图片管理 在图片表中我们需要对图片数据进行增删改查操作,这时候我们可以借助于视图集中的ModelViewset来完成相应的操作 获取图片列表数据 接口分析 请求方式: GET /meiduo_admi ...
- 阿里云使用js 实现OSS图片上传、获取OSS图片列表、获取图片外网访问地址(读写权限私有、读写权限公共);...
详情请参考:https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.763.ZgC59a 或者https://h ...
- python提高图片分辨率_python 获取图片分辨率的方法
python 获取图片分辨率的方法 pil版: from PIL import Image filename = r'E:\data\yangben\0.jpg' img = Image.open(f ...
最新文章
- SharePoint Project Item Replaceable Parameters
- [Beego] 内置的模板函数(不同格式的字符串和html的互转)
- 在线邮箱订阅反馈html5模板
- 浅析 golang module
- C++基础:: struct vs class
- android新闻客户端实验报告,基于Android平台的新闻客户端设计与实现
- 整体压缩跟分开压缩哪个更小_目标检测轻量化压缩
- 【汇率预测】基于matlab模拟退火算法优化BP神经网络汇率预测【含Matlab源码 689期】
- SpringCloud升级之路2020.0.x版-1.背景
- 微信卡券管理 - 修改卡券基本信息
- PAT A1154 Vertex Coloring ——多少楼台烟雨中
- 白钢条用什么可以切割_白钢用什么切割?
- 职业情商修炼的3523法
- Chris Guillebeau: 做什么由自己决定 - 人物志第17篇
- @pack://application:,,,/报错
- “量子密话” 我们与量子科技第一次亲密接触
- 画皮SAP-世界管理软件公司的中国真相
- 收藏,Python 开发中有哪些高级技巧?
- 工业数字化转型 — 工业现场总线
- c语言范例开发大全DVD,C语言程序开发范例宝典(光盘内容另行下载,地址见书封底)...
热门文章
- 2023张雪峰老师推荐的10大高薪专业,计算机专业仍然屠榜
- 中国优秀的架构师是不是出现了严重断层?
- mybatis-结果集索引越界
- Python 验证身份证的正确性并获得相关的信息
- 试想:有什么是5G手机能做,但今天的4G手机做不了的?
- 谷歌浏览器插件批量下载OMI数据方法
- Jimdo全球领先的500M免费自助建站
- PCB图片Logo添加工具
- PureComponent的浅比较
- 编写函数模拟掷骰子的游戏(两个骰子)。第一次掷的时候,如果点数之和为7或11则获胜;如果点数之和为2、3或12则落败;其他情况下的点数之和称为“目标”,游戏继续。在后续的投掷中,如果玩家再次掷出“目标