详解exif.js，应用于canvas照片倒转（海报H5）
业务背景，苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改
window.btoa(str)转码
window.atob(base64)解码
EXIF.JS API
1、EXIF.getData(img, callback)获取图像的数据，能兼容尚未支持提供 EXIF 数据的浏览器获取到元数据。
2、EXIF.getTag(img, tag)
获取图像的某个数据
获取旋转角度
EXIF.getTag(this,'Orientation')
orientstion属性说明
参数1、6、8、3分别对应旋转角度0deg,顺时针90deg，逆时针90deg，180deg
3、EXIF.getAllTags(img)
获取图像的全部数据，值以对象的方式返回 4、EXIF.pretty(img)
获取图像的全部数据，值以字符串的方式返回 上代码html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>图片上传</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/uploadImage.js" ></script>
<script type="text/javascript" src="js/exif.min.js" ></script>
<script> </script>
</head>
<body>
<div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">
上传图片:
<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />
</div>
<canvas id="canvas">你的浏览器不支持canvas</canvas>
<div style="margin-top: 10px;">
<img alt="preview" src="" id="myImage"/>
</div>
</body>
</html>
js代码uploadImagejs如下
function selectFileImage(fileObj) {
//当文件改变的时候,调用该函数
var file = fileObj.files['0'];
console.log(file);
//图片方向角 added by lzk
var Orientation = null;
if (file) {
console.log("正在上传,请稍后...");
var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
//showMyTips("请选择jpeg、png格式的图片", false);
return;
}
// var URL = URL || webkitURL;
//获取照片方向角属性，用户旋转控制
EXIF.getData(file, function() {
// alert(EXIF.pretty(this));
EXIF.getAllTags(this);
console.log(EXIF.getAllTags(this))
//alert(EXIF.getTag(this, 'Orientation'));
Orientation = EXIF.getTag(this, 'Orientation');
console.log(Orientation)
//return;
});
var oReader = new FileReader();
oReader.onload = function(e) {
//var blob = URL.createObjectURL(file);
//_compress(blob, file, basePath);
var image = new Image();
// base64码
image.src = e.target.result;
image.onload = function() {
// 读取文件自己的宽高
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
// 判断图片宽大于高,并且宽大于800的话让图片宽度为800,相应等比改变图片高度
if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
// 判断图片高大于宽,并且高大于1200的话让图片高度为1200,相应等比改变图片高度
expectHeight = 1200;
expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
}
// 获取画布设置画布宽高,把图片放入发布,画布大小为图片大小并从0,0点开始绘制
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var base64 = null;
//修复ios ，判断用户是否为iphone
if (navigator.userAgent.match(/iphone/i)) {
console.log('iphone');
//alert(expectWidth + ',' + expectHeight);
//如果方向角不为1，都需要进行旋转 added by lzk
if(Orientation != "" && Orientation != 1){
alert('旋转处理');
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
alert('需要顺时针（向左）90度旋转');
rotateImg(this,'left',canvas);
break;
case 8://需要逆时针（向右）90度旋转
alert('需要顺时针（向右）90度旋转');
rotateImg(this,'right',canvas);
break;
case 3://需要180度旋转
alert('需要180度旋转');
rotateImg(this,'right',canvas);//转两次
rotateImg(this,'right',canvas);
break;
}
}
/*var mpImg = new MegaPixImage(image);
mpImg.render(canvas, {
maxWidth: 800,
maxHeight: 1200,
quality: 0.8,
orientation: 8
});*/
base64 = canvas.toDataURL("image/jpeg", 0.8);
}else if (navigator.userAgent.match(/Android/i)) {// 修复android
var encoder = new JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
}else{
//alert(Orientation);
if(Orientation != "" && Orientation != 1){
//alert('旋转处理');
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
alert('需要顺时针（向左）90度旋转');
rotateImg(this,'left',canvas);
break;
case 8://需要逆时针（向右）90度旋转
alert('需要顺时针（向右）90度旋转');
rotateImg(this,'right',canvas);
break;
case 3://需要180度旋转
alert('需要180度旋转');
rotateImg(this,'right',canvas);//转两次
rotateImg(this,'right',canvas);
break;
}
}
// 如果需要旋转,旋转后 canvas.todataurl转成base64码
base64 = canvas.toDataURL("image/jpeg", 0.8); //toDataURL(图片类型,图片质量0-1)
}
//uploadImage(base64); ，myimage
$("#myImage").attr("src", base64);
};
};
oReader.readAsDataURL(file);
}
}
//对图片旋转处理 added by lzk
function rotateImg(img, direction,canvas) {
//alert(img);
//最小与最大旋转方向，图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == null)return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.height;
var width = img.width;
//var step = img.getAttribute('step');
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//img.setAttribute('step', step);
/*var canvas = document.getElementById('pic_' + pid);
if (canvas == null) {
img.style.display = 'none';
canvas = document.createElement('canvas');
canvas.setAttribute('id', 'pic_' + pid);
img.parentNode.appendChild(canvas);
} */
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
}
exif.min.js
(function(){function e(e){return!!e.exifdata}function t(e,t){t=t||e.match(/^data\:([^\;]+)\;base64,/im)[1]||"",e=e.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var n=atob(e),r=n.length,i=new ArrayBuffer(r),o=new Uint8Array(i),a=0;a<r;a++)o[a]=n.charCodeAt(a);return i}function r(e,t){var n=new XMLHttpRequest;n.open("GET",e,!0),n.responseType="blob",n.onload=function(e){200!=this.status&&0!==this.status||t(this.response)},n.send()}function i(e,n){function i(t){var r=o(t);e.exifdata=r||{};var i=a(t);if(e.iptcdata=i||{},F.isXmpEnabled){var s=m(t);e.xmpdata=s||{}}n&&n.call(e)}if(e.src)if(/^data\:/i.test(e.src))i(t(e.src));else if(/^blob\:/i.test(e.src))(l=new FileReader).onload=function(e){i(e.target.result)},r(e.src,function(e){l.readAsArrayBuffer(e)});else{var s=new XMLHttpRequest;s.onload=function(){if(200!=this.status&&0!==this.status)throw"Could not load image";i(s.response),s=null},s.open("GET",e.src,!0),s.responseType="arraybuffer",s.send(null)}else if(self.FileReader&&(e instanceof self.Blob||e instanceof self.File)){var l=new FileReader;l.onload=function(e){S&&console.log("Got file of length "+e.target.result.byteLength),i(e.target.result)},l.readAsArrayBuffer(e)}}function o(e){var t=new DataView(e);if(S&&console.log("Got file of length "+e.byteLength),255!=t.getUint8(0)||216!=t.getUint8(1))return S&&console.log("Not a valid JPEG"),!1;for(var n,r=2,i=e.byteLength;r<i;){if(255!=t.getUint8(r))return S&&console.log("Not a valid marker at offset "+r+", found: "+t.getUint8(r)),!1;if(n=t.getUint8(r+1),S&&console.log(n),225==n)return S&&console.log("Found 0xFFE1 marker"),g(t,r+4,t.getUint16(r+2));r+=2+t.getUint16(r+2)}}function a(e){var t=new DataView(e);if(S&&console.log("Got file of length "+e.byteLength),255!=t.getUint8(0)||216!=t.getUint8(1))return S&&console.log("Not a valid JPEG"),!1;for(var n=2,r=e.byteLength;n<r;){if(function(e,t){return ===e.getUint8(t)&&66===e.getUint8(t+1)&&73===e.getUint8(t+2)&&77===e.getUint8(t+3)&&4===e.getUint8(t+4)&&4===e.getUint8(t+5)}(t,n)){var i=t.getUint8(n+7);return i%2!=0&&(i+=1),0===i&&(i=4),s(e,n+8+i,t.getUint16(n+6+i))}n++}}function s(e,t,n){for(var r,i,o,a,s=new DataView(e),l={},u=t;u<t+n;)28===s.getUint8(u)&&2===s.getUint8(u+1)&&(a=s.getUint8(u+2))in v&&((o=s.getInt16(u+3))+5,i=v[a],r=f(s,u+5,o),l.hasOwnProperty(i)?l[i]instanceof Array?l[i].push(r):l[i]=[l[i],r]:l[i]=r),u++;return l}function l(e,t,n,r,i){var o,a,s,l=e.getUint16(n,!i),c={};for(s=0;s<l;s++)o=n+12*s+2,!(a=r[e.getUint16(o,!i)])&&S&&console.log("Unknown tag: "+e.getUint16(o,!i)),c[a]=u(e,o,t,n,i);return c}function u(e,t,n,r,i){var o,a,s,l,u,c,d=e.getUint16(t+2,!i),g=e.getUint32(t+4,!i),m=e.getUint32(t+8,!i)+n;switch(d){case 1:case 7:if(1==g)return e.getUint8(t+8,!i);for(o=g>4?m:t+8,a=[],l=0;l<g;l++)a[l]=e.getUint8(o+l);return a;case 2:return o=g>4?m:t+8,f(e,o,g-1);case 3:if(1==g)return e.getUint16(t+8,!i);for(o=g>2?m:t+8,a=[],l=0;l<g;l++)a[l]=e.getUint16(o+2*l,!i);return a;case 4:if(1==g)return e.getUint32(t+8,!i);for(a=[],l=0;l<g;l++)a[l]=e.getUint32(m+4*l,!i);return a;case 5:if(1==g)return u=e.getUint32(m,!i),c=e.getUint32(m+4,!i),s=new Number(u/c),s.numerator=u,s.denominator=c,s;for(a=[],l=0;l<g;l++)u=e.getUint32(m+8*l,!i),c=e.getUint32(m+4+8*l,!i),a[l]=new Number(u/c),a[l].numerator=u,a[l].denominator=c;return a;case 9:if(1==g)return e.getInt32(t+8,!i);for(a=[],l=0;l<g;l++)a[l]=e.getInt32(m+4*l,!i);return a;case 10:if(1==g)return e.getInt32(m,!i)/e.getInt32(m+4,!i);for(a=[],l=0;l<g;l++)a[l]=e.getInt32(m+8*l,!i)/e.getInt32(m+4+8*l,!i);return a}}function c(e,t,n){var r=e.getUint16(t,!n);return e.getUint32(t+2+12*r,!n)}function d(e,t,n,r){var i=c(e,t+n,r);if(!i)return{};if(i>e.byteLength)return{};var o=l(e,t,t+i,C,r);if(o.Compression)switch(o.Compression){case 6:if(o.JpegIFOffset&&o.JpegIFByteCount){var a=t+o.JpegIFOffset,s=o.JpegIFByteCount;o.blob=new Blob([new Uint8Array(e.buffer,a,s)],{type:"image/jpeg"})}break;case 1:console.log("Thumbnail image format is TIFF, which is not implemented.");break;default:console.log("Unknown thumbnail image format '%s'",o.Compression)}else 2==o.PhotometricInterpretation&&console.log("Thumbnail image format is RGB, which is not implemented.");return o}function f(e,t,r){var i="";for(n=t;n<t+r;n++)i+=String.fromCharCode(e.getUint8(n));return i}function g(e,t){if("Exif"!=f(e,t,4))return S&&console.log("Not valid EXIF data! "+f(e,t,4)),!1;var n,r,i,o,a,s=t+6;if(18761==e.getUint16(s))n=!1;else{if(19789!=e.getUint16(s))return S&&console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)"),!1;n=!0}if(42!=e.getUint16(s+2,!n))return S&&console.log("Not valid TIFF data! (no 0x002A)"),!1;var u=e.getUint32(s+4,!n);if(u<8)return S&&console.log("Not valid TIFF data! (First offset less than 8)",e.getUint32(s+4,!n)),!1;if((r=l(e,s,s+u,b,n)).ExifIFDPointer){o=l(e,s,s+r.ExifIFDPointer,y,n);for(i in o){switch(i){case"LightSource":case"Flash":case"MeteringMode":case"ExposureProgram":case"SensingMethod":case"SceneCaptureType":case"SceneType":case"CustomRendered":case"WhiteBalance":case"GainControl":case"Contrast":case"Saturation":case"Sharpness":case"SubjectDistanceRange":case"FileSource":o[i]=I[i][o[i]];break;case"ExifVersion":case"FlashpixVersion":o[i]=String.fromCharCode(o[i][0],o[i][1],o[i][2],o[i][3]);break;case"ComponentsConfiguration":o[i]=I.Components[o[i][0]]+I.Components[o[i][1]]+I.Components[o[i][2]]+I.Components[o[i][3]]}r[i]=o[i]}}if(r.GPSInfoIFDPointer){a=l(e,s,s+r.GPSInfoIFDPointer,x,n);for(i in a){switch(i){case"GPSVersionID":a[i]=a[i][0]+"."+a[i][1]+"."+a[i][2]+"."+a[i][3]}r[i]=a[i]}}return r.thumbnail=d(e,s,u,n),r}function m(e){if("DOMParser"in self){var t=new DataView(e);if(S&&console.log("Got file of length "+e.byteLength),255!=t.getUint8(0)||216!=t.getUint8(1))return S&&console.log("Not a valid JPEG"),!1;for(var n=2,r=e.byteLength,i=new DOMParser;n<r-4;){if("http"==f(t,n,4)){var o=f(t,n-1,t.getUint16(n-2)-1),a=o.indexOf("xmpmeta>")+8,s=(o=o.substring(o.indexOf("<x:xmpmeta"),a)).indexOf("x:xmpmeta")+10;return o=o.slice(0,s)+'xmlns:Iptc4xmpCore="http://iptc.org/std/Iptc4xmpCore/1.0/xmlns/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tiff="http://ns.adobe.com/tiff/1.0/" xmlns:plus="http://schemas.android.com/apk/lib/com.google.android.gms.plus" xmlns:ext="http://www.gettyimages.com/xsltExtension/1.0" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:crs="http://ns.adobe.com/camera-raw-settings/1.0/" xmlns:xapGImg="http://ns.adobe.com/xap/1.0/g/img/" xmlns:Iptc4xmpExt="http://iptc.org/std/Iptc4xmpExt/2008-02-29/" '+o.slice(s),h(i.parseFromString(o,"text/xml"))}n++}}}function p(e){var t={};if(1==e.nodeType){if(e.attributes.length>0){t["@attributes"]={};for(var n=0;n<e.attributes.length;n++){var r=e.attributes.item(n);t["@attributes"][r.nodeName]=r.nodeValue}}}else if(3==e.nodeType)return e.nodeValue;if(e.hasChildNodes())for(var i=0;i<e.childNodes.length;i++){var o=e.childNodes.item(i),a=o.nodeName;if(null==t[a])t[a]=p(o);else{if(null==t[a].push){var s=t[a];t[a]=[],t[a].push(s)}t[a].push(p(o))}}return t}function h(e){try{var t={};if(e.children.length>0)for(var n=0;n<e.children.length;n++){var r=e.children.item(n),i=r.attributes;for(var o in i){var a=i[o],s=a.nodeName,l=a.nodeValue;void 0!==s&&(t[s]=l)}var u=r.nodeName;if(void ===t[u])t[u]=p(r);else{if(void ===t[u].push){var c=t[u];t[u]=[],t[u].push(c)}t[u].push(p(r))}}else t=e.textContent;return t}catch(e){console.log(e.message)}}var S=!1,P=this,F=function(e){return e instanceof F?e:this instanceof F?void(this.EXIFwrapped=e):new F(e)};"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=F),exports.EXIF=F):P.EXIF=F;var y=F.Tags={36864:"ExifVersion",40960:"FlashpixVersion",40961:"ColorSpace",40962:"PixelXDimension",40963:"PixelYDimension",37121:"ComponentsConfiguration",37122:"CompressedBitsPerPixel",37500:"MakerNote",37510:"UserComment",40964:"RelatedSoundFile",36867:"DateTimeOriginal",36868:"DateTimeDigitized",37520:"SubsecTime",37521:"SubsecTimeOriginal",37522:"SubsecTimeDigitized",33434:"ExposureTime",33437:"FNumber",34850:"ExposureProgram",34852:"SpectralSensitivity",34855:"ISOSpeedRatings",34856:"OECF",37377:"ShutterSpeedValue",37378:"ApertureValue",37379:"BrightnessValue",37380:"ExposureBias",37381:"MaxApertureValue",37382:"SubjectDistance",37383:"MeteringMode",37384:"LightSource",37385:"Flash",37396:"SubjectArea",37386:"FocalLength",41483:"FlashEnergy",41484:"SpatialFrequencyResponse",41486:"FocalPlaneXResolution",41487:"FocalPlaneYResolution",41488:"FocalPlaneResolutionUnit",41492:"SubjectLocation",41493:"ExposureIndex",41495:"SensingMethod",41728:"FileSource",41729:"SceneType",41730:"CFAPattern",41985:"CustomRendered",41986:"ExposureMode",41987:"WhiteBalance",41988:"DigitalZoomRation",41989:"FocalLengthIn35mmFilm",41990:"SceneCaptureType",41991:"GainControl",41992:"Contrast",41993:"Saturation",41994:"Sharpness",41995:"DeviceSettingDescription",41996:"SubjectDistanceRange",40965:"InteroperabilityIFDPointer",42016:"ImageUniqueID"},b=F.TiffTags={256:"ImageWidth",257:"ImageHeight",34665:"ExifIFDPointer",34853:"GPSInfoIFDPointer",40965:"InteroperabilityIFDPointer",258:"BitsPerSample",259:"Compression",262:"PhotometricInterpretation",274:"Orientation",277:"SamplesPerPixel",284:"PlanarConfiguration",530:"YCbCrSubSampling",531:"YCbCrPositioning",282:"XResolution",283:"YResolution",296:"ResolutionUnit",273:"StripOffsets",278:"RowsPerStrip",279:"StripByteCounts",513:"JPEGInterchangeFormat",514:"JPEGInterchangeFormatLength",301:"TransferFunction",318:"WhitePoint",319:"PrimaryChromaticities",529:"YCbCrCoefficients",532:"ReferenceBlackWhite",306:"DateTime",270:"ImageDescription",271:"Make",272:"Model",305:"Software",315:"Artist",33432:"Copyright"},x=F.GPSTags={0:"GPSVersionID",1:"GPSLatitudeRef",2:"GPSLatitude",3:"GPSLongitudeRef",4:"GPSLongitude",5:"GPSAltitudeRef",6:"GPSAltitude",7:"GPSTimeStamp",8:"GPSSatellites",9:"GPSStatus",10:"GPSMeasureMode",11:"GPSDOP",12:"GPSSpeedRef",13:"GPSSpeed",14:"GPSTrackRef",15:"GPSTrack",16:"GPSImgDirectionRef",17:"GPSImgDirection",18:"GPSMapDatum",19:"GPSDestLatitudeRef",20:"GPSDestLatitude",21:"GPSDestLongitudeRef",22:"GPSDestLongitude",23:"GPSDestBearingRef",24:"GPSDestBearing",25:"GPSDestDistanceRef",26:"GPSDestDistance",27:"GPSProcessingMethod",28:"GPSAreaInformation",29:"GPSDateStamp",30:"GPSDifferential"},C=F.IFD1Tags={256:"ImageWidth",257:"ImageHeight",258:"BitsPerSample",259:"Compression",262:"PhotometricInterpretation",273:"StripOffsets",274:"Orientation",277:"SamplesPerPixel",278:"RowsPerStrip",279:"StripByteCounts",282:"XResolution",283:"YResolution",284:"PlanarConfiguration",296:"ResolutionUnit",513:"JpegIFOffset",514:"JpegIFByteCount",529:"YCbCrCoefficients",530:"YCbCrSubSampling",531:"YCbCrPositioning",532:"ReferenceBlackWhite"},I=F.StringValues={ExposureProgram:{0:"Not defined",1:"Manual",2:"Normal program",3:"Aperture priority",4:"Shutter priority",5:"Creative program",6:"Action program",7:"Portrait mode",8:"Landscape mode"},MeteringMode:{0:"Unknown",1:"Average",2:"CenterWeightedAverage",3:"Spot",4:"MultiSpot",5:"Pattern",6:"Partial",255:"Other"},LightSource:{0:"Unknown",1:"Daylight",2:"Fluorescent",3:"Tungsten (incandescent light)",4:"Flash",9:"Fine weather",10:"Cloudy weather",11:"Shade",12:"Daylight fluorescent (D 5700 - 7100K)",13:"Day white fluorescent (N 4600 - 5400K)",14:"Cool white fluorescent (W 3900 - 4500K)",15:"White fluorescent (WW 3200 - 3700K)",17:"Standard light A",18:"Standard light B",19:"Standard light C",20:"D55",21:"D65",22:"D75",23:"D50",24:"ISO studio tungsten",255:"Other"},Flash:{0:"Flash did not fire",1:"Flash fired",5:"Strobe return light not detected",7:"Strobe return light detected",9:"Flash fired, compulsory flash mode",13:"Flash fired, compulsory flash mode, return light not detected",15:"Flash fired, compulsory flash mode, return light detected",16:"Flash did not fire, compulsory flash mode",24:"Flash did not fire, auto mode",25:"Flash fired, auto mode",29:"Flash fired, auto mode, return light not detected",31:"Flash fired, auto mode, return light detected",32:"No flash function",65:"Flash fired, red-eye reduction mode",69:"Flash fired, red-eye reduction mode, return light not detected",71:"Flash fired, red-eye reduction mode, return light detected",73:"Flash fired, compulsory flash mode, red-eye reduction mode",77:"Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",79:"Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",89:"Flash fired, auto mode, red-eye reduction mode",93:"Flash fired, auto mode, return light not detected, red-eye reduction mode",95:"Flash fired, auto mode, return light detected, red-eye reduction mode"},SensingMethod:{1:"Not defined",2:"One-chip color area sensor",3:"Two-chip color area sensor",4:"Three-chip color area sensor",5:"Color sequential area sensor",7:"Trilinear sensor",8:"Color sequential linear sensor"},SceneCaptureType:{0:"Standard",1:"Landscape",2:"Portrait",3:"Night scene"},SceneType:{1:"Directly photographed"},CustomRendered:{0:"Normal process",1:"Custom process"},WhiteBalance:{0:"Auto white balance",1:"Manual white balance"},GainControl:{0:"None",1:"Low gain up",2:"High gain up",3:"Low gain down",4:"High gain down"},Contrast:{0:"Normal",1:"Soft",2:"Hard"},Saturation:{0:"Normal",1:"Low saturation",2:"High saturation"},Sharpness:{0:"Normal",1:"Soft",2:"Hard"},SubjectDistanceRange:{0:"Unknown",1:"Macro",2:"Close view",3:"Distant view"},FileSource:{3:"DSC"},Components:{0:"",1:"Y",2:"Cb",3:"Cr",4:"R",5:"G",6:"B"}},v={120:"caption",110:"credit",25:"keywords",55:"dateCreated",80:"byline",85:"bylineTitle",122:"captionWriter",105:"headline",116:"copyright",15:"category"};F.enableXmp=function(){F.isXmpEnabled=!0},F.disableXmp=function(){F.isXmpEnabled=!1},F.getData=function(t,n){return!((self.Image&&t instanceof self.Image||self.HTMLImageElement&&t instanceof self.HTMLImageElement)&&!t.complete)&&(e(t)?n&&n.call(t):i(t,n),!0)},F.getTag=function(t,n){if(e(t))return t.exifdata[n]},F.getIptcTag=function(t,n){if(e(t))return t.iptcdata[n]},F.getAllTags=function(t){if(!e(t))return{};var n,r=t.exifdata,i={};for(n in r)r.hasOwnProperty(n)&&(i[n]=r[n]);return i},F.getAllIptcTags=function(t){if(!e(t))return{};var n,r=t.iptcdata,i={};for(n in r)r.hasOwnProperty(n)&&(i[n]=r[n]);return i},F.pretty=function(t){if(!e(t))return"";var n,r=t.exifdata,i="";for(n in r)r.hasOwnProperty(n)&&("object"==typeof r[n]?r[n]instanceof Number?i+=n+" : "+r[n]+" ["+r[n].numerator+"/"+r[n].denominator+"]\r\n":i+=n+" : ["+r[n].length+" values]\r\n":i+=n+" : "+r[n]+"\r\n");return i},F.readFromBinaryFile=function(e){return o(e)},"function"==typeof define&&define.amd&&define("exif-js",[],function(){return F})}).call(this);
exif.min.js下载地址
https://www.bootcdn.cn/exif-js/
详解exif.js，应用于canvas照片倒转（海报H5）的更多相关文章
- HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
- 详解Vue.js 技术
本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...
- Day04 dom详解及js事件
day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证 上次课内容回顾: JS中ECMAScript用法: JS定义变 ...
- JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- javascript数组详解（js数组深度解析）【forEach(),every(),map(),filter(),reduce()】
Array 对象是一个复合类型,用于在单个的变量中存储多个值,每个值类型可以不同. 创建数组对象的方法: new Array(); new Array(size); new Array(element ...
- JavaScript语法详解：JS简介&变量
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. JavaScript简介 Web前端有三层: HTML:从语义的角度,描 ...
- 详解tween.js 中文使用指南
补间(动画)是一个概念,允许你以平滑的方式更改对象的属性.你只需告诉它哪些属性要更改,当补间结束运行时它们应该具有哪些最终值,以及这需要多长时间,补间引擎将负责计算从起始点到结束点的值. 例如,pos ...
- es6常用功能与异步详解（JS高级面试题）
callback hell方法的使用 可读性不友好 function loadImg(src,callback,fail){ var img = document.createElement('img ...
- 区别和详解：js中call()和apply()的用法
1.关于call()和apply()的疑点: apply和call的区别在哪里 什么情况下用apply,什么情况下用call apply的其他巧妙用法(一般在什么情况下可以使用apply) 2.语法和 ...
随机推荐
- Unity热更新技术整理
一.热更新学习介绍 1.什么是热更新 举例来说: 游戏上线后,玩家下载第一个版本(70M左右或者更大),在运营的过程中,如果需要更换UI显示,或者修改游戏的逻辑,这个时候,如果不使用热更新,就需要重新 ...
- 基于JDBC的数据库连接池技术研究与应用
引言 近年来,随着Internet/Intranet建网技术的飞速发展和在世界范围内的迅速普及,计算机 应用程序已从传统的桌面应用转到Web应用.基于B/S(Browser/Server)架构的3层开 ...
- [转载]Java集合系列大全总结
Java 集合系列目录(Category) 22:06:49 2019-02-27
- VC：GetWindowRect、GetClientRect、ScreenToClient与ClientToScreen
GetWindowRect是取得窗口在屏幕坐标系下的RECT坐标(包括客户区和非客户区),这样可以得到窗口的大小和相对屏幕左上角(0,0)的位置. GetClientRect取得窗口客户区(不包括非客 ...
- TCP三次握手与防火墙规则
一个(tct)socket连接需要在客户端与服务端开启一个隧道,客户端提供一个端口(new时可指定,也可不指定,随机),服务端的端口和地址一定要指定.在win下,服务端创建监听端口时,防火墙会提示阻止 ...
- MIDA Converter Basic patched for RAD Studio 10.1.2 Berlin （VCL转换到FMX）
Mida is the only way to try to convert your project from VCL to FireMonkey. Version after version, M ...
- mysql连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
现象:客户端连接服务器端mysql是没问题的,所有都木有问题,应用程序配置也没问题,但是连接就抛异常: com.mysql.jdbc.exceptions.jdbc4.CommunicationsEx ...
- .net core i上 K8S(一)集群搭建
1.前言 以前搭建集群都是使用nginx反向代理,但现在我们有了更好的选择——K8S.我不打算一上来就讲K8S的知识点,因为知识点还是比较多,我打算先从搭建K8S集群讲起,我也是在搭建集群的过程中熟悉 ...
- Spring Boot - 依赖注入
@Autowired 查找被注解的变量类型,找到所有此类型的构建或此类型子类的构建 如果一个也没有找到,看required参数,false则用null,true则失败(默认,即spring会启动失败) ...
- C# winform 自定义鼠标光标
第一种:(调用系统API)首先引入两个命名空间代码如下: using System.Runtime.InteropServices;using System.Reflection;导入API代码如下: ...