上传图片的时候，ios手机的图片会旋转90°

1、问题：在html5中利用canvas对上传图片压缩的时候，ios手机竖着拍照时，图片会旋转90°，其他情况正常。

2、解决方法：获取拍照角度，对Ios竖着拍的照片进行角度处理

3、利用exif.js获取到照片的拍摄信息，这里主要用到Orientation，这个属性

Orientation 旋转角度

1 0°

3 180°

6 90°

8 270°

旋转方向都为顺时针

下面介绍图片的压缩和对ios拍照问题的解决案例

先要引入exif.js文件和jquery.js文件

<script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>
<script type="text/javascript" src='js/exif.js?v=b5d2a25070'></script>

4、html

<input type="file" id="upLoad" name="image">
<!-- 显示上传之后的图片 -->
<div id='previewImg'><img id='viewImg'/>
</div>

5、js

 $('#upLoad').on('change',function(){$('#loding').css('display','block');var filePath = $(this).val(),         //获取到input的value，里面是文件的路径fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),// src = '',  //转成可以在本地预览的blob格式imgBase64 = '',      //存储图片的imgBase64fileObj = document.getElementById('upLoad').files[0];       //上传文件的对象,要这样写才行，用jquery写法获取不到对象uploadAddress = globalConfig.pre_api_url + '/wxwall_api/msg/pa_upload_img.php',data = null;// 检查是否是图片if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');$('#loding').css('display','none');return;  }// 对图片进行压缩compress(fileObj,function(imgBase64){imgBase64 = imgBase64;// 对图片压缩成功之后，在定义上传参数，和请求；放在compress（）外面的话，则先执行request（）请求，此时imgBase64还未赋值赋值// 定义上传的参数data = {'imgBase64':imgBase64,'openid':openid};// 发送上传图片的请求request(uploadAddress,data,function(res){console.log(res.msg);$('#loding').css('display','none');remote_pa_img_path = res.data.remote_pa_img_path;$('#viewImg').attr('src',imgBase64); //显示预览图片$('#imgBox').addClass('imgBox2');},function(res){console.log(res.msg);$('#loding').css('display','none');});});       });// 不对图片进行压缩，直接转成base64function directTurnIntoBase64(fileObj,callback){var r = new FileReader();// 转成base64r.onload = function(){//变成字符串imgBase64 = r.result;console.log(imgBase64);callback(imgBase64);}r.readAsDataURL(fileObj);    //转成Base64格式}// 对图片进行压缩function compress(fileObj, callback) { if ( typeof (FileReader) === 'undefined') {  console.log("当前浏览器内核不支持base64图标压缩");  //调用上传方式不压缩  directTurnIntoBase64(fileObj,callback);} else {  try {    var Orientation=null,reader = new FileReader();  // reader.readAsDataURL(fileObj);  //获取图片Orientation参数EXIF.getData(fileObj, function() {Orientation = EXIF.getTag(this, 'Orientation');});reader.onload = function (e) {  var image = $('<img/>'); image.attr('src', e.target.result);  image.load(function(){  var data='',canvas = document.createElement('canvas'), context = canvas.getContext('2d'),imageWidth = this.width,imageHeight = this.height;//压缩图片if(imageWidth > 1000 || imageHeight > 1000) {//等比例压缩，不失真，不裁剪if( imageWidth > imageHeight){imageWidth = 1000;imageHeight = imageWidth*imageHeight/this.width;}else{imageHeight = 1000;imageWidth = imageHeight*imageWidth/this.height;}}//旋转到正常角度,位置偏移var angle = 0;var x =0 ,y=0,w=imageWidth,h=imageHeight;   //canvas画布// 定义画布的大小canvas.width = imageWidth;canvas.height = imageHeight;context.drawImage(this, x, y,imageWidth,imageHeight); /*Orientation:3:ios手机底部在左边，拍出来的横图是倒置的，需要旋转180度6:ios手机底部朝下，拍出来的照片是头在右边，需要逆时针旋转90度*/switch(Orientation){case 3:rotateImg(this,'half',canvas);//转两次  break;case 6:rotateImg(this,'left',canvas);  break;case 8:rotateImg(this,'right',canvas);  break;default:break;}// context.rotate(angle);  // 画图// context.drawImage(this, x, y,imageWidth,imageHeight); data = canvas.toDataURL('image/jpeg');  //转成bae64编码callback(data);}); }; reader.readAsDataURL(fileObj);  } catch(e) {  console.log("压缩失败!");  //调用直接上传方式  不压缩 directTurnIntoBase64(fileObj,callback); }  }}  //对图片旋转处理 added by lzk  function rotateImg(img, direction,canvas) {    //alert(img);  //最小与最大旋转方向，图片旋转4次后回到原方向    var min_step = 0;    var max_step = 4;    //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 if(direction == 'half'){} 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;    }    }

6、exif.js代码如下：

(function() {var debug = false;var root = this;var EXIF = function(obj) {if (obj instanceof EXIF) return obj;if (!(this instanceof EXIF)) return new EXIF(obj);this.EXIFwrapped = obj;};if (typeof exports !== 'undefined') {if (typeof module !== 'undefined' && module.exports) {exports = module.exports = EXIF;}exports.EXIF = EXIF;} else {root.EXIF = EXIF;}var ExifTags = EXIF.Tags = {// version tags0x9000 : "ExifVersion",             // EXIF version0xA000 : "FlashpixVersion",         // Flashpix format version// colorspace tags0xA001 : "ColorSpace",              // Color space information tag// image configuration0xA002 : "PixelXDimension",         // Valid width of meaningful image0xA003 : "PixelYDimension",         // Valid height of meaningful image0x9101 : "ComponentsConfiguration", // Information about channels0x9102 : "CompressedBitsPerPixel",  // Compressed bits per pixel// user information0x927C : "MakerNote",               // Any desired information written by the manufacturer0x9286 : "UserComment",             // Comments by user// related file0xA004 : "RelatedSoundFile",        // Name of related sound file// date and time0x9003 : "DateTimeOriginal",        // Date and time when the original image was generated0x9004 : "DateTimeDigitized",       // Date and time when the image was stored digitally0x9290 : "SubsecTime",              // Fractions of seconds for DateTime0x9291 : "SubsecTimeOriginal",      // Fractions of seconds for DateTimeOriginal0x9292 : "SubsecTimeDigitized",     // Fractions of seconds for DateTimeDigitized// picture-taking conditions0x829A : "ExposureTime",            // Exposure time (in seconds)0x829D : "FNumber",                 // F number0x8822 : "ExposureProgram",         // Exposure program0x8824 : "SpectralSensitivity",     // Spectral sensitivity0x8827 : "ISOSpeedRatings",         // ISO speed rating0x8828 : "OECF",                    // Optoelectric conversion factor0x9201 : "ShutterSpeedValue",       // Shutter speed0x9202 : "ApertureValue",           // Lens aperture0x9203 : "BrightnessValue",         // Value of brightness0x9204 : "ExposureBias",            // Exposure bias0x9205 : "MaxApertureValue",        // Smallest F number of lens0x9206 : "SubjectDistance",         // Distance to subject in meters0x9207 : "MeteringMode",            // Metering mode0x9208 : "LightSource",             // Kind of light source0x9209 : "Flash",                   // Flash status0x9214 : "SubjectArea",             // Location and area of main subject0x920A : "FocalLength",             // Focal length of the lens in mm0xA20B : "FlashEnergy",             // Strobe energy in BCPS0xA20C : "SpatialFrequencyResponse",    //0xA20E : "FocalPlaneXResolution",   // Number of pixels in width direction per FocalPlaneResolutionUnit0xA20F : "FocalPlaneYResolution",   // Number of pixels in height direction per FocalPlaneResolutionUnit0xA210 : "FocalPlaneResolutionUnit",    // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution0xA214 : "SubjectLocation",         // Location of subject in image0xA215 : "ExposureIndex",           // Exposure index selected on camera0xA217 : "SensingMethod",           // Image sensor type0xA300 : "FileSource",              // Image source (3 == DSC)0xA301 : "SceneType",               // Scene type (1 == directly photographed)0xA302 : "CFAPattern",              // Color filter array geometric pattern0xA401 : "CustomRendered",          // Special processing0xA402 : "ExposureMode",            // Exposure mode0xA403 : "WhiteBalance",            // 1 = auto white balance, 2 = manual0xA404 : "DigitalZoomRation",       // Digital zoom ratio0xA405 : "FocalLengthIn35mmFilm",   // Equivalent foacl length assuming 35mm film camera (in mm)0xA406 : "SceneCaptureType",        // Type of scene0xA407 : "GainControl",             // Degree of overall image gain adjustment0xA408 : "Contrast",                // Direction of contrast processing applied by camera0xA409 : "Saturation",              // Direction of saturation processing applied by camera0xA40A : "Sharpness",               // Direction of sharpness processing applied by camera0xA40B : "DeviceSettingDescription",    //0xA40C : "SubjectDistanceRange",    // Distance to subject// other tags0xA005 : "InteroperabilityIFDPointer",0xA420 : "ImageUniqueID"            // Identifier assigned uniquely to each image};var TiffTags = EXIF.TiffTags = {0x0100 : "ImageWidth",0x0101 : "ImageHeight",0x8769 : "ExifIFDPointer",0x8825 : "GPSInfoIFDPointer",0xA005 : "InteroperabilityIFDPointer",0x0102 : "BitsPerSample",0x0103 : "Compression",0x0106 : "PhotometricInterpretation",0x0112 : "Orientation",0x0115 : "SamplesPerPixel",0x011C : "PlanarConfiguration",0x0212 : "YCbCrSubSampling",0x0213 : "YCbCrPositioning",0x011A : "XResolution",0x011B : "YResolution",0x0128 : "ResolutionUnit",0x0111 : "StripOffsets",0x0116 : "RowsPerStrip",0x0117 : "StripByteCounts",0x0201 : "JPEGInterchangeFormat",0x0202 : "JPEGInterchangeFormatLength",0x012D : "TransferFunction",0x013E : "WhitePoint",0x013F : "PrimaryChromaticities",0x0211 : "YCbCrCoefficients",0x0214 : "ReferenceBlackWhite",0x0132 : "DateTime",0x010E : "ImageDescription",0x010F : "Make",0x0110 : "Model",0x0131 : "Software",0x013B : "Artist",0x8298 : "Copyright"};var GPSTags = EXIF.GPSTags = {0x0000 : "GPSVersionID",0x0001 : "GPSLatitudeRef",0x0002 : "GPSLatitude",0x0003 : "GPSLongitudeRef",0x0004 : "GPSLongitude",0x0005 : "GPSAltitudeRef",0x0006 : "GPSAltitude",0x0007 : "GPSTimeStamp",0x0008 : "GPSSatellites",0x0009 : "GPSStatus",0x000A : "GPSMeasureMode",0x000B : "GPSDOP",0x000C : "GPSSpeedRef",0x000D : "GPSSpeed",0x000E : "GPSTrackRef",0x000F : "GPSTrack",0x0010 : "GPSImgDirectionRef",0x0011 : "GPSImgDirection",0x0012 : "GPSMapDatum",0x0013 : "GPSDestLatitudeRef",0x0014 : "GPSDestLatitude",0x0015 : "GPSDestLongitudeRef",0x0016 : "GPSDestLongitude",0x0017 : "GPSDestBearingRef",0x0018 : "GPSDestBearing",0x0019 : "GPSDestDistanceRef",0x001A : "GPSDestDistance",0x001B : "GPSProcessingMethod",0x001C : "GPSAreaInformation",0x001D : "GPSDateStamp",0x001E : "GPSDifferential"};// EXIF 2.3 Specvar IFD1Tags = EXIF.IFD1Tags = {0x0100: "ImageWidth",0x0101: "ImageHeight",0x0102: "BitsPerSample",0x0103: "Compression",0x0106: "PhotometricInterpretation",0x0111: "StripOffsets",0x0112: "Orientation",0x0115: "SamplesPerPixel",0x0116: "RowsPerStrip",0x0117: "StripByteCounts",0x011A: "XResolution",0x011B: "YResolution",0x011C: "PlanarConfiguration",0x0128: "ResolutionUnit",0x0201: "JpegIFOffset",    // When image format is JPEG, this value show offset to JPEG data stored.(aka "ThumbnailOffset" or "JPEGInterchangeFormat")0x0202: "JpegIFByteCount", // When image format is JPEG, this value shows data size of JPEG image (aka "ThumbnailLength" or "JPEGInterchangeFormatLength")0x0211: "YCbCrCoefficients",0x0212: "YCbCrSubSampling",0x0213: "YCbCrPositioning",0x0214: "ReferenceBlackWhite"};var StringValues = EXIF.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 : {0x0000 : "Flash did not fire",0x0001 : "Flash fired",0x0005 : "Strobe return light not detected",0x0007 : "Strobe return light detected",0x0009 : "Flash fired, compulsory flash mode",0x000D : "Flash fired, compulsory flash mode, return light not detected",0x000F : "Flash fired, compulsory flash mode, return light detected",0x0010 : "Flash did not fire, compulsory flash mode",0x0018 : "Flash did not fire, auto mode",0x0019 : "Flash fired, auto mode",0x001D : "Flash fired, auto mode, return light not detected",0x001F : "Flash fired, auto mode, return light detected",0x0020 : "No flash function",0x0041 : "Flash fired, red-eye reduction mode",0x0045 : "Flash fired, red-eye reduction mode, return light not detected",0x0047 : "Flash fired, red-eye reduction mode, return light detected",0x0049 : "Flash fired, compulsory flash mode, red-eye reduction mode",0x004D : "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",0x004F : "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",0x0059 : "Flash fired, auto mode, red-eye reduction mode",0x005D : "Flash fired, auto mode, return light not detected, red-eye reduction mode",0x005F : "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"}};function addEvent(element, event, handler) {if (element.addEventListener) {element.addEventListener(event, handler, false);} else if (element.attachEvent) {element.attachEvent("on" + event, handler);}}function imageHasData(img) {return !!(img.exifdata);}function base64ToArrayBuffer(base64, contentType) {contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg'base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');var binary = atob(base64);var len = binary.length;var buffer = new ArrayBuffer(len);var view = new Uint8Array(buffer);for (var i = 0; i < len; i++) {view[i] = binary.charCodeAt(i);}return buffer;}function objectURLToBlob(url, callback) {var http = new XMLHttpRequest();http.open("GET", url, true);http.responseType = "blob";http.onload = function(e) {if (this.status == 200 || this.status === 0) {callback(this.response);}};http.send();}function getImageData(img, callback) {function handleBinaryFile(binFile) {var data = findEXIFinJPEG(binFile);img.exifdata = data || {};var iptcdata = findIPTCinJPEG(binFile);img.iptcdata = iptcdata || {};if (EXIF.isXmpEnabled) {var xmpdata= findXMPinJPEG(binFile);img.xmpdata = xmpdata || {};               }if (callback) {callback.call(img);}}if (img.src) {if (/^data\:/i.test(img.src)) { // Data URIvar arrayBuffer = base64ToArrayBuffer(img.src);handleBinaryFile(arrayBuffer);} else if (/^blob\:/i.test(img.src)) { // Object URLvar fileReader = new FileReader();fileReader.onload = function(e) {handleBinaryFile(e.target.result);};objectURLToBlob(img.src, function (blob) {fileReader.readAsArrayBuffer(blob);});} else {var http = new XMLHttpRequest();http.onload = function() {if (this.status == 200 || this.status === 0) {handleBinaryFile(http.response);} else {throw "Could not load image";}http = null;};http.open("GET", img.src, true);http.responseType = "arraybuffer";http.send(null);}} else if (self.FileReader && (img instanceof self.Blob || img instanceof self.File)) {var fileReader = new FileReader();fileReader.onload = function(e) {if (debug) console.log("Got file of length " + e.target.result.byteLength);handleBinaryFile(e.target.result);};fileReader.readAsArrayBuffer(img);}}function findEXIFinJPEG(file) {var dataView = new DataView(file);if (debug) console.log("Got file of length " + file.byteLength);if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {if (debug) console.log("Not a valid JPEG");return false; // not a valid jpeg}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 false; // not a valid marker, something is wrong}marker = dataView.getUint8(offset + 1);if (debug) console.log(marker);// we could implement handling for other markers here,// but we're only looking for 0xFFE1 for EXIF dataif (marker == 225) {if (debug) console.log("Found 0xFFE1 marker");return readEXIFData(dataView, offset + 4, dataView.getUint16(offset + 2) - 2);// offset += 2 + file.getShortAt(offset+2, true);} else {offset += 2 + dataView.getUint16(offset+2);}}}function findIPTCinJPEG(file) {var dataView = new DataView(file);if (debug) console.log("Got file of length " + file.byteLength);if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {if (debug) console.log("Not a valid JPEG");return false; // not a valid jpeg}var offset = 2,length = file.byteLength;var isFieldSegmentStart = function(dataView, offset){return (dataView.getUint8(offset) === 0x38 &&dataView.getUint8(offset+1) === 0x42 &&dataView.getUint8(offset+2) === 0x49 &&dataView.getUint8(offset+3) === 0x4D &&dataView.getUint8(offset+4) === 0x04 &&dataView.getUint8(offset+5) === 0x04);};while (offset < length) {if ( isFieldSegmentStart(dataView, offset )){// Get the length of the name header (which is padded to an even number of bytes)var nameHeaderLength = dataView.getUint8(offset+7);if(nameHeaderLength % 2 !== 0) nameHeaderLength += 1;// Check for pre photoshop 6 formatif(nameHeaderLength === 0) {// Always 4nameHeaderLength = 4;}var startOffset = offset + 8 + nameHeaderLength;var sectionLength = dataView.getUint16(offset + 6 + nameHeaderLength);return readIPTCData(file, startOffset, sectionLength);break;}// Not the marker, continue searchingoffset++;}}var IptcFieldMap = {0x78 : 'caption',0x6E : 'credit',0x19 : 'keywords',0x37 : 'dateCreated',0x50 : 'byline',0x55 : 'bylineTitle',0x7A : 'captionWriter',0x69 : 'headline',0x74 : 'copyright',0x0F : 'category'};function readIPTCData(file, startOffset, sectionLength){var dataView = new DataView(file);var data = {};var fieldValue, fieldName, dataSize, segmentType, segmentSize;var segmentStartPos = startOffset;while(segmentStartPos < startOffset+sectionLength) {if(dataView.getUint8(segmentStartPos) === 0x1C && dataView.getUint8(segmentStartPos+1) === 0x02){segmentType = dataView.getUint8(segmentStartPos+2);if(segmentType in IptcFieldMap) {dataSize = dataView.getInt16(segmentStartPos+3);segmentSize = dataSize + 5;fieldName = IptcFieldMap[segmentType];fieldValue = getStringFromDB(dataView, segmentStartPos+5, dataSize);// Check if we already stored a value with this nameif(data.hasOwnProperty(fieldName)) {// Value already stored with this name, create multivalue fieldif(data[fieldName] instanceof Array) {data[fieldName].push(fieldValue);}else {data[fieldName] = [data[fieldName], fieldValue];}}else {data[fieldName] = fieldValue;}}}segmentStartPos++;}return data;}function readTags(file, tiffStart, dirStart, strings, bigEnd) {var entries = file.getUint16(dirStart, !bigEnd),tags = {},entryOffset, tag,i;for (i=0;i<entries;i++) {entryOffset = dirStart + i*12 + 2;tag = strings[file.getUint16(entryOffset, !bigEnd)];if (!tag && debug) console.log("Unknown tag: " + file.getUint16(entryOffset, !bigEnd));tags[tag] = readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd);}return tags;}function readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd) {var type = file.getUint16(entryOffset+2, !bigEnd),numValues = file.getUint32(entryOffset+4, !bigEnd),valueOffset = file.getUint32(entryOffset+8, !bigEnd) + tiffStart,offset,vals, val, n,numerator, denominator;switch (type) {case 1: // byte, 8-bit unsigned intcase 7: // undefined, 8-bit byte, value depending on fieldif (numValues == 1) {return file.getUint8(entryOffset + 8, !bigEnd);} else {offset = numValues > 4 ? valueOffset : (entryOffset + 8);vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getUint8(offset + n);}return vals;}case 2: // ascii, 8-bit byteoffset = numValues > 4 ? valueOffset : (entryOffset + 8);return getStringFromDB(file, offset, numValues-1);case 3: // short, 16 bit intif (numValues == 1) {return file.getUint16(entryOffset + 8, !bigEnd);} else {offset = numValues > 2 ? valueOffset : (entryOffset + 8);vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getUint16(offset + 2*n, !bigEnd);}return vals;}case 4: // long, 32 bit intif (numValues == 1) {return file.getUint32(entryOffset + 8, !bigEnd);} else {vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getUint32(valueOffset + 4*n, !bigEnd);}return vals;}case 5:    // rational = two long values, first is numerator, second is denominatorif (numValues == 1) {numerator = file.getUint32(valueOffset, !bigEnd);denominator = file.getUint32(valueOffset+4, !bigEnd);val = new Number(numerator / denominator);val.numerator = numerator;val.denominator = denominator;return val;} else {vals = [];for (n=0;n<numValues;n++) {numerator = file.getUint32(valueOffset + 8*n, !bigEnd);denominator = file.getUint32(valueOffset+4 + 8*n, !bigEnd);vals[n] = new Number(numerator / denominator);vals[n].numerator = numerator;vals[n].denominator = denominator;}return vals;}case 9: // slong, 32 bit signed intif (numValues == 1) {return file.getInt32(entryOffset + 8, !bigEnd);} else {vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getInt32(valueOffset + 4*n, !bigEnd);}return vals;}case 10: // signed rational, two slongs, first is numerator, second is denominatorif (numValues == 1) {return file.getInt32(valueOffset, !bigEnd) / file.getInt32(valueOffset+4, !bigEnd);} else {vals = [];for (n=0;n<numValues;n++) {vals[n] = file.getInt32(valueOffset + 8*n, !bigEnd) / file.getInt32(valueOffset+4 + 8*n, !bigEnd);}return vals;}}}/*** Given an IFD (Image File Directory) start offset* returns an offset to next IFD or 0 if it's the last IFD.*/function getNextIFDOffset(dataView, dirStart, bigEnd){//the first 2bytes means the number of directory entries contains in this IFDvar entries = dataView.getUint16(dirStart, !bigEnd);// After last directory entry, there is a 4bytes of data,// it means an offset to next IFD.// If its value is '0x00000000', it means this is the last IFD and there is no linked IFD.return dataView.getUint32(dirStart + 2 + entries * 12, !bigEnd); // each entry is 12 bytes long}function readThumbnailImage(dataView, tiffStart, firstIFDOffset, bigEnd){// get the IFD1 offsetvar IFD1OffsetPointer = getNextIFDOffset(dataView, tiffStart+firstIFDOffset, bigEnd);if (!IFD1OffsetPointer) {// console.log('******** IFD1Offset is empty, image thumb not found ********');return {};}else if (IFD1OffsetPointer > dataView.byteLength) { // this should not happen// console.log('******** IFD1Offset is outside the bounds of the DataView ********');return {};}// console.log('*******  thumbnail IFD offset (IFD1) is: %s', IFD1OffsetPointer);var thumbTags = readTags(dataView, tiffStart, tiffStart + IFD1OffsetPointer, IFD1Tags, bigEnd)// EXIF 2.3 specification for JPEG format thumbnail// If the value of Compression(0x0103) Tag in IFD1 is '6', thumbnail image format is JPEG.// Most of Exif image uses JPEG format for thumbnail. In that case, you can get offset of thumbnail// by JpegIFOffset(0x0201) Tag in IFD1, size of thumbnail by JpegIFByteCount(0x0202) Tag.// Data format is ordinary JPEG format, starts from 0xFFD8 and ends by 0xFFD9. It seems that// JPEG format and 160x120pixels of size are recommended thumbnail format for Exif2.1 or later.if (thumbTags['Compression']) {// console.log('Thumbnail image found!');switch (thumbTags['Compression']) {case 6:// console.log('Thumbnail image format is JPEG');if (thumbTags.JpegIFOffset && thumbTags.JpegIFByteCount) {// extract the thumbnailvar tOffset = tiffStart + thumbTags.JpegIFOffset;var tLength = thumbTags.JpegIFByteCount;thumbTags['blob'] = new Blob([new Uint8Array(dataView.buffer, tOffset, tLength)], {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'", thumbTags['Compression']);}}else if (thumbTags['PhotometricInterpretation'] == 2) {console.log("Thumbnail image format is RGB, which is not implemented.");}return thumbTags;}function getStringFromDB(buffer, start, length) {var outstr = "";for (n = start; n < start+length; n++) {outstr += String.fromCharCode(buffer.getUint8(n));}return outstr;}function readEXIFData(file, start) {if (getStringFromDB(file, start, 4) != "Exif") {if (debug) console.log("Not valid EXIF data! " + getStringFromDB(file, start, 4));return false;}var bigEnd,tags, tag,exifData, gpsData,tiffOffset = start + 6;// test for TIFF validity and endiannessif (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 false;}if (file.getUint16(tiffOffset+2, !bigEnd) != 0x002A) {if (debug) console.log("Not valid TIFF data! (no 0x002A)");return false;}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 false;}tags = readTags(file, tiffOffset, tiffOffset + firstIFDOffset, TiffTags, bigEnd);if (tags.ExifIFDPointer) {exifData = readTags(file, tiffOffset, tiffOffset + tags.ExifIFDPointer, ExifTags, bigEnd);for (tag in exifData) {switch (tag) {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" :exifData[tag] = StringValues[tag][exifData[tag]];break;case "ExifVersion" :case "FlashpixVersion" :exifData[tag] = String.fromCharCode(exifData[tag][0], exifData[tag][1], exifData[tag][2], exifData[tag][3]);break;case "ComponentsConfiguration" :exifData[tag] =StringValues.Components[exifData[tag][0]] +StringValues.Components[exifData[tag][1]] +StringValues.Components[exifData[tag][2]] +StringValues.Components[exifData[tag][3]];break;}tags[tag] = exifData[tag];}}if (tags.GPSInfoIFDPointer) {gpsData = readTags(file, tiffOffset, tiffOffset + tags.GPSInfoIFDPointer, GPSTags, bigEnd);for (tag in gpsData) {switch (tag) {case "GPSVersionID" :gpsData[tag] = gpsData[tag][0] +"." + gpsData[tag][1] +"." + gpsData[tag][2] +"." + gpsData[tag][3];break;}tags[tag] = gpsData[tag];}}// extract thumbnailtags['thumbnail'] = readThumbnailImage(file, tiffOffset, firstIFDOffset, bigEnd);return tags;}function findXMPinJPEG(file) {if (!('DOMParser' in self)) {// console.warn('XML parsing not supported without DOMParser');return;}var dataView = new DataView(file);if (debug) console.log("Got file of length " + file.byteLength);if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {if (debug) console.log("Not a valid JPEG");return false; // not a valid jpeg}var offset = 2,length = file.byteLength,dom = new DOMParser();while (offset < (length-4)) {if (getStringFromDB(dataView, offset, 4) == "http") {var startOffset = offset - 1;var sectionLength = dataView.getUint16(offset - 2) - 1;var xmpString = getStringFromDB(dataView, startOffset, sectionLength)var xmpEndIndex = xmpString.indexOf('xmpmeta>') + 8;xmpString = xmpString.substring( xmpString.indexOf( '<x:xmpmeta' ), xmpEndIndex );var indexOfXmp = xmpString.indexOf('x:xmpmeta') + 10//Many custom written programs embed xmp/xml without any namespace. Following are some of them.//Without these namespaces, XML is thought to be invalid by parsersxmpString = xmpString.slice(0, indexOfXmp)+ '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/" '+ xmpString.slice(indexOfXmp)var domDocument = dom.parseFromString( xmpString, 'text/xml' );return xml2Object(domDocument);} else{offset++;}}}function xml2json(xml) {var json = {};if (xml.nodeType == 1) { // element nodeif (xml.attributes.length > 0) {json['@attributes'] = {};for (var j = 0; j < xml.attributes.length; j++) {var attribute = xml.attributes.item(j);json['@attributes'][attribute.nodeName] = attribute.nodeValue;}}} else if (xml.nodeType == 3) { // text nodereturn xml.nodeValue;}// deal with childrenif (xml.hasChildNodes()) {for(var i = 0; i < xml.childNodes.length; i++) {var child = xml.childNodes.item(i);var nodeName = child.nodeName;if (json[nodeName] == null) {json[nodeName] = xml2json(child);} else {if (json[nodeName].push == null) {var old = json[nodeName];json[nodeName] = [];json[nodeName].push(old);}json[nodeName].push(xml2json(child));}}}return json;}function xml2Object(xml) {try {var obj = {};if (xml.children.length > 0) {for (var i = 0; i < xml.children.length; i++) {var item = xml.children.item(i);var attributes = item.attributes;for(var idx in attributes) {var itemAtt = attributes[idx];var dataKey = itemAtt.nodeName;var dataValue = itemAtt.nodeValue;if(dataKey !== undefined) {obj[dataKey] = dataValue;}}var nodeName = item.nodeName;if (typeof (obj[nodeName]) == "undefined") {obj[nodeName] = xml2json(item);} else {if (typeof (obj[nodeName].push) == "undefined") {var old = obj[nodeName];obj[nodeName] = [];obj[nodeName].push(old);}obj[nodeName].push(xml2json(item));}}} else {obj = xml.textContent;}return obj;} catch (e) {console.log(e.message);}}EXIF.enableXmp = function() {EXIF.isXmpEnabled = true;}EXIF.disableXmp = function() {EXIF.isXmpEnabled = false;}EXIF.getData = function(img, callback) {if (((self.Image && img instanceof self.Image)|| (self.HTMLImageElement && img instanceof self.HTMLImageElement))&& !img.complete)return false;if (!imageHasData(img)) {getImageData(img, callback);} else {if (callback) {callback.call(img);}}return true;}EXIF.getTag = function(img, tag) {if (!imageHasData(img)) return;return img.exifdata[tag];}EXIF.getIptcTag = function(img, tag) {if (!imageHasData(img)) return;return img.iptcdata[tag];}EXIF.getAllTags = function(img) {if (!imageHasData(img)) return {};var a,data = img.exifdata,tags = {};for (a in data) {if (data.hasOwnProperty(a)) {tags[a] = data[a];}}return tags;}EXIF.getAllIptcTags = function(img) {if (!imageHasData(img)) return {};var a,data = img.iptcdata,tags = {};for (a in data) {if (data.hasOwnProperty(a)) {tags[a] = data[a];}}return tags;}EXIF.pretty = function(img) {if (!imageHasData(img)) return "";var a,data = img.exifdata,strPretty = "";for (a in data) {if (data.hasOwnProperty(a)) {if (typeof data[a] == "object") {if (data[a] instanceof Number) {strPretty += a + " : " + data[a] + " [" + data[a].numerator + "/" + data[a].denominator + "]\r\n";} else {strPretty += a + " : [" + data[a].length + " values]\r\n";}} else {strPretty += a + " : " + data[a] + "\r\n";}}}return strPretty;}EXIF.readFromBinaryFile = function(file) {return findEXIFinJPEG(file);}if (typeof define === 'function' && define.amd) {define('exif-js', [], function() {return EXIF;});}
}.call(this));

转载链接：利用exif.js解决ios手机上传竖拍照片旋转90度问题

上传图片的时候，ios手机的图片会旋转90°相关推荐

解决ios横屏拍照图片自动旋转90度问题
解决ios横屏拍照图片自动旋转90度问题参考文章: (1)解决ios横屏拍照图片自动旋转90度问题 (2)https://www.cnblogs.com/lanshengzhong/p/900856 ...
ios 拍照上传到服务器_ios端浏览器拍照上传到服务器，图片被旋转90度 php 解决方案...
1.可以通过前端进行解决,本案例通过后端解决的判断请求的浏览器的ua,如果是ios浏览器则进行90度旋转重点来了: 必须确保检测的图片是ios设备上传的完整图片,不要在前端压缩过的,因为压缩后的图 ...
解决H5 IOS手机图片上传时图片会旋转90°问题
解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库一.Vant UI库Uploader 组件图 ...
python图片旋转脚本_Python+OpenCV 实现图片无损旋转90°且无黑边
0. 引言有如上一张图片,在以往的图像旋转处理中,往往得到如图所示的图片. 然而,在进行一些其他图像处理或者图像展示时,黑边带来了一些不便.本文解决图片旋转后出现黑边的问题,实现了图片尺寸不变的旋转 ...
在ios手机上图片之间存在白色间隙
最近在开发移动端官网页面,遇到不同机型间的适配小bug. 现象:图片在ios手机上会出现白色的间隙.安卓手机上则不会出现解决方式:把img标签的display属性改成block: img{displ ...
javascript H5解决手机拍照图片被旋转问题
网络上有许多的实现图片预览功能的案例,这些案例大部分都存在一个问题就是在手机等移动数码设备上,拍照成像后的预览图居然会被旋转. 实现预览的大概有以下几个过程: 监听文件选择框的 onchange ...
iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法
http://www.tuicool.com/articles/IfEZre 今天写demo的时候发现, 如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度. ...
android 竖屏拍照旋转90度,三星等机型上拍照后图片被旋转90度的解决方案
考虑到Android7.0以后拍照修改了调用和返回方式,找到了一个看起来还不错的第三方库,实际可能并非如此. -TakePhoto 在三星Note3和S6上测试,发现竖屏拍照后返回的照片是横屏的,在其 ...
html中如何使图片自动旋转90度,css怎么让图片旋转90度？
css怎么让图片旋转90度?下面本篇文章给大家介绍一下使用CSS让图片旋转90度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让图片旋转90度? 在CSS中,可以 ...

上传图片的时候，ios手机的图片会旋转90°

上传图片的时候，ios手机的图片会旋转90°相关推荐

最新文章

热门文章