JS获取图片的EXIF信息+纠正图片方向

前端图片处理碰到的一个离奇 bug , 关于图片的 EXIF 信息，特地记录下来。

然后使用一下代码可以获取Orientation信息，并纠正Orientation带来的图片旋转问题

// from http://stackoverflow.com/a/32490603
function getOrientation(file, callback) {var reader = new FileReader();reader.onload = function(event) {var view = new DataView(event.target.result);if (view.getUint16(0, false) != 0xFFD8) return callback(-2);var length = view.byteLength,offset = 2;while (offset < length) {var marker = view.getUint16(offset, false);offset += 2;if (marker == 0xFFE1) {if (view.getUint32(offset += 2, false) != 0x45786966) {return callback(-1);}var little = view.getUint16(offset += 6, false) == 0x4949;offset += view.getUint32(offset + 4, little);var tags = view.getUint16(offset, little);offset += 2;for (var i = 0; i < tags; i++)if (view.getUint16(offset + (i * 12), little) == 0x0112)return callback(view.getUint16(offset + (i * 12) + 8, little));}else if ((marker & 0xFF00) != 0xFF00) break;else offset += view.getUint16(offset, false);}return callback(-1);};reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
};var fileInput = document.getElementById("file-input");fileInput.onchange = function(event) {var file = event.target.files[0];getOrientation(file, function(orientation) {alert(orientation);});
};

// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法，返回校正方向后的base64
function getImgData(img, dir, next) {var image = new Image();image.onload = function () {var degree = 0, drawWidth, drawHeight, width, height;drawWidth = this.naturalWidth;drawHeight = this.naturalHeight;//以下改变一下图片大小var maxSide = Math.max(drawWidth, drawHeight);if (maxSide > 1024) {var minSide = Math.min(drawWidth, drawHeight);minSide = minSide / maxSide * 1024;maxSide = 1024;if (drawWidth > drawHeight) {drawWidth = maxSide;drawHeight = minSide;} else {drawWidth = minSide;drawHeight = maxSide;}}var canvas = document.createElement('canvas');canvas.width = width = drawWidth;canvas.height = height = drawHeight;var context = canvas.getContext('2d');//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式switch (dir) {//iphone横屏拍摄，此时home键在左侧 case 3:degree = 180;drawWidth = -width;drawHeight = -height;break;//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向) case 6:canvas.width = height;canvas.height = width;degree = 90;drawWidth = width;drawHeight = -height;break;//iphone竖屏拍摄，此时home键在上方 case 8:canvas.width = height;canvas.height = width;degree = 270;drawWidth = -width;drawHeight = height;break;}//使用canvas旋转校正context.rotate(degree * Math.PI / 180);context.drawImage(this, 0, 0, drawWidth, drawHeight);//返回校正图片next(canvas.toDataURL("image/png"));}image.src = img;
}

参考链接：

笔记：使用 JavaScript 读取 JPEG 文件 EXIF 信息中的 Orientation 值

JS获取图片的EXIF信息+纠正图片方向

Get Image orientation code - JSFiddle

JS获取图片的EXIF信息+纠正图片方向相关推荐

C# 获取图片的EXIF 信息
关于 EXIF 信息的介绍. 1 EXIF,是英文Exchangeable Image File(可交换图像文件)的缩写.EXIF是一种图像文件格式,只是文件的后缀名为jpg.EXIF信息是由数码相 ...
php exif信息,php通过exif_read_data函数获取图片的exif信息
php获取图片的exif信息,php自带一个exif_read_data函数可以用来读取图片的exif信息,代码来自php手册 echo "test1.jpg: \n"; $exi ...
使用imageIO获取和修改图片的exif信息
看到这篇文章.喜欢的不得了-转来分享给大家! 一幅图片除了包含我们能看见的像素信息,背后还包含了拍摄时间,光圈大小,曝光等信息.UIImage类将这些细节信息都隐藏了起来,只提供我们关心的图片尺寸,图 ...
获取图片的EXIF信息如此困难？
对于数码相机所拍摄出的图片,Exif信息非常重要.Exif是英语Exchangeable Image File(可交换图像文件)的缩写,最初由日本电子工业发展协会(JEIDA --Japan Elec ...
php exif信息,php通过exif_read_data函数获取图片的exif信息_php技巧
php获取图片的exif信息,php自带一个exif_read_data函数可以用来读取图片的exif信息,代码来自php手册 \n"; $exif = exif_read_data('te ...
php exif信息,php通过exif_read_data函数获取图片的exif信息 PHP
php获取图片的exif信息,php自带一个exif_read_data函数可以用来读取图片的exif信息,代码来自php手册 echo 'test1.jpg: \n'; $exif = exif_r ...
在Android下通过ExifInterface类操作图片的Exif信息
什么是Exif 先来了解什么是Exif.Exif是一种图像文件格式,它的数据存储于JPEG格式是完全相同的,实际上Exif格式就是JPEG格式头插入了数码照片的信息,包括拍摄的光圈.快门.平衡白.I ...
python根据exif信息旋转图片
这几天在写业务代码有个需求:压缩图片.本来是很简单需求,三下五除二就写好了,但是在自己用手机上传图片的时候发现压缩后的图片都歪了,查了一下,原因是图片中的exif信息中的Orientation记录中图 ...
python相机拍照显示时间_python让图片按照exif信息里的创建时间进行排序的方法...
本文实例讲述了python让图片按照exif信息里的创建时间进行排序的方法.分享给大家供大家参考.具体分析如下: 我们经常会从不同的设备里取出照片,比如照相机,手机,iphone等等,操作系统记录的创 ...

JS获取图片的EXIF信息+纠正图片方向

JS获取图片的EXIF信息+纠正图片方向相关推荐

最新文章

热门文章