Exif.js 读取图像的元数据以及使用方法

xiaoxiao2021-03-01  96

Exif.js 读取图像的元数据

在最近的活动中,遇到了用户上传图片时图片方向偏转的问题。针对这个问题,通过google得到exif.js可以获取照片的元数据,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC 端也会用到,兼容性良好,兼容主流浏览器,IE10 以下不支持。

Exif.js使用方法

EXIF.getData(document.getElementById('imgElement'), function(){ EXIF.getAllTags(this); EXIF.getTag(this, 'Orientation'); }); API 方法 名称说明EXIF.getData(img, callback)获取图像的数据EXIF.getTag(img, tag)获取图像的某个数据EXIF.getAllTags(img)获取图像的全部数据,值以对象的方式返回EXIF.pretty(img)获取图像的全部数据,值以字符串的方式返回

2. Tiff相关

名称说明ImageWidth图像宽度ImageHeight图像高度BitsPerSample比特采样率Compression压缩方法PhotometricInterpretation像素合成Orientation拍摄方向SamplesPerPixel像素数PlanarConfiguration数据排列YCbCrSubSampling色相抽样比率YCbCrPositioning色相配置XResolutionX方向分辨率YResolutionY方向分辨率ResolutionUnit分辨率单位StripOffsets图像资料位置RowsPerStrip每带行数StripByteCounts每压缩带比特数JPEGInterchangeFormatJPEG SOI 偏移量JPEGInterchangeFormatLengthJPEG 比特数TransferFunction转移功能WhitePoint白点色度PrimaryChromaticities主要色度YCbCrCoefficients颜色空间转换矩阵系数ReferenceBlackWhite黑白参照值DateTime日期和时间ImageDescription图像描述、来源Make生产者Model型号Software软件Artist作者Copyright版权信息

主要用到的就是以上的部分。

Exif.js代码部分

EXIF.getData(e.target.files['0'], function() { EXIF.getAllTags(this); Orientation = EXIF.getTag(this, 'Orientation'); }); var file = e.target.files.item(0); var freader = new FileReader(); freader.readAsDataURL(file); freader.onload = function(e) { var i = new Image(); i.src = e.target.result; i.onload = function() { if (i.width >= 560 && i.height >= 720) { if (i.width / i.hehight > 7 / 9) { i.width = i.width / i.height * 720; i.height = 720; if (i.width < 560) { i.height = i.height / i.width * 560; i.width = 560; } } else { i.height = i.height / i.width * 560; i.width = 560; if (i.height < 720) { i.width = i.width / i.height * 720; i.height = 720; } } } else { $(".problem-activity").addClass("pic-bigger"); $(".problem").css("display", "block"); } var dataURL = ""; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); if (Orientation != "") { switch (Orientation) { case 6: canvas.width = i.height; canvas.height = i.width; ctx.rotate(90 * Math.PI / 180); ctx.drawImage(i, 0, -i.height, i.width, i.height); break; case 8: canvas.width = i.height; canvas.height = i.width; ctx.rotate(270 * Math.PI / 180); ctx.drawImage(i, -i.width, 0, i.width, i.height); break; case 3: //需要180度旋转 canvas.width = i.width; canvas.height = i.height; ctx.rotate(180 * Math.PI / 180); ctx.drawImage(i, -i.width, -i.height, i.width, i.height); break; default: canvas.width = i.width; canvas.height = i.height; ctx.drawImage(i, 0, 0, i.width, i.height); break; } } }

以上代码对用户上传的图片先进行大小限制后,再对有偏移的图片进行旋转,使图片恢复正常视角。

以上为exif.js的使用介绍。

转载请注明原文地址: https://www.6miu.com/read-3350088.html

最新回复(0)