微信内网页某些安卓手机不能上传图片文件的问题(2)
来源:互联网 发布:网络手机号码 编辑:程序博客网 时间:2024/05/09 09:57
起这个标题名只是为了和前一篇文章相对应。
相对比较完善的手机端网页图片上传完成了,其中碰见了很多问题,由于是第一次弄,就一个个的解决掉,最后这个目前来说是比较满意的版本。
开发环境为 Bootstrap框架,另外需要引进一个JS用于判断图片拍摄的角度问题。
为什么要用这个呢?因为IOS系统在拍摄照片时,会给生成的图片文件添加一个拍摄角度的数据,在文件上传时,是用HTML5的 canvas加载图片,然后输出base64字符串,在服务器上保存时图片会发生翻转,这个问题只在苹果手机上有,安卓手机没这个问题。我也是第一次知道这个东西。
先上这个js的代码: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 tags 0x9000 : "ExifVersion", // EXIF version 0xA000 : "FlashpixVersion", // Flashpix format version // colorspace tags 0xA001 : "ColorSpace", // Color space information tag // image configuration 0xA002 : "PixelXDimension", // Valid width of meaningful image 0xA003 : "PixelYDimension", // Valid height of meaningful image 0x9101 : "ComponentsConfiguration", // Information about channels 0x9102 : "CompressedBitsPerPixel", // Compressed bits per pixel // user information 0x927C : "MakerNote", // Any desired information written by the manufacturer 0x9286 : "UserComment", // Comments by user // related file 0xA004 : "RelatedSoundFile", // Name of related sound file // date and time 0x9003 : "DateTimeOriginal", // Date and time when the original image was generated 0x9004 : "DateTimeDigitized", // Date and time when the image was stored digitally 0x9290 : "SubsecTime", // Fractions of seconds for DateTime 0x9291 : "SubsecTimeOriginal", // Fractions of seconds for DateTimeOriginal 0x9292 : "SubsecTimeDigitized", // Fractions of seconds for DateTimeDigitized // picture-taking conditions 0x829A : "ExposureTime", // Exposure time (in seconds) 0x829D : "FNumber", // F number 0x8822 : "ExposureProgram", // Exposure program 0x8824 : "SpectralSensitivity", // Spectral sensitivity 0x8827 : "ISOSpeedRatings", // ISO speed rating 0x8828 : "OECF", // Optoelectric conversion factor 0x9201 : "ShutterSpeedValue", // Shutter speed 0x9202 : "ApertureValue", // Lens aperture 0x9203 : "BrightnessValue", // Value of brightness 0x9204 : "ExposureBias", // Exposure bias 0x9205 : "MaxApertureValue", // Smallest F number of lens 0x9206 : "SubjectDistance", // Distance to subject in meters 0x9207 : "MeteringMode", // Metering mode 0x9208 : "LightSource", // Kind of light source 0x9209 : "Flash", // Flash status 0x9214 : "SubjectArea", // Location and area of main subject 0x920A : "FocalLength", // Focal length of the lens in mm 0xA20B : "FlashEnergy", // Strobe energy in BCPS 0xA20C : "SpatialFrequencyResponse", // 0xA20E : "FocalPlaneXResolution", // Number of pixels in width direction per FocalPlaneResolutionUnit 0xA20F : "FocalPlaneYResolution", // Number of pixels in height direction per FocalPlaneResolutionUnit 0xA210 : "FocalPlaneResolutionUnit", // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution 0xA214 : "SubjectLocation", // Location of subject in image 0xA215 : "ExposureIndex", // Exposure index selected on camera 0xA217 : "SensingMethod", // Image sensor type 0xA300 : "FileSource", // Image source (3 == DSC) 0xA301 : "SceneType", // Scene type (1 == directly photographed) 0xA302 : "CFAPattern", // Color filter array geometric pattern 0xA401 : "CustomRendered", // Special processing 0xA402 : "ExposureMode", // Exposure mode 0xA403 : "WhiteBalance", // 1 = auto white balance, 2 = manual 0xA404 : "DigitalZoomRation", // Digital zoom ratio 0xA405 : "FocalLengthIn35mmFilm", // Equivalent foacl length assuming 35mm film camera (in mm) 0xA406 : "SceneCaptureType", // Type of scene 0xA407 : "GainControl", // Degree of overall image gain adjustment 0xA408 : "Contrast", // Direction of contrast processing applied by camera 0xA409 : "Saturation", // Direction of saturation processing applied by camera 0xA40A : "Sharpness", // Direction of sharpness processing applied by camera 0xA40B : "DeviceSettingDescription", // 0xA40C : "SubjectDistanceRange", // Distance to subject // other tags 0xA005 : "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" }; 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); var iptcdata = findIPTCinJPEG(binFile); img.exifdata = data || {}; img.iptcdata = iptcdata || {}; if (callback) { callback.call(img); } } if (img.src) { if (/^data\:/i.test(img.src)) { // Data URI var arrayBuffer = base64ToArrayBuffer(img.src); handleBinaryFile(arrayBuffer); } else if (/^blob\:/i.test(img.src)) { // Object URL var 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 (window.FileReader && (img instanceof window.Blob || img instanceof window.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 data if (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 format if(nameHeaderLength === 0) { // Always 4 nameHeaderLength = 4; } var startOffset = offset + 8 + nameHeaderLength; var sectionLength = dataView.getUint16(offset + 6 + nameHeaderLength); return readIPTCData(file, startOffset, sectionLength); break; } // Not the marker, continue searching offset++; } } 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 name if(data.hasOwnProperty(fieldName)) { // Value already stored with this name, create multivalue field if(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 int case 7: // undefined, 8-bit byte, value depending on field if (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 byte offset = numValues > 4 ? valueOffset : (entryOffset + 8); return getStringFromDB(file, offset, numValues-1); case 3: // short, 16 bit int if (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 int if (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 denominator if (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 int if (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 denominator if (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; } } } 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 endianness 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 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]; } } return tags; } EXIF.getData = function(img, callback) { if ((img instanceof Image || img instanceof 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.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.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));
页面需要添加这个js的引用
HTML代码
<div class="row-fluid" style=" margin-bottom:10px; margin-top:10px;"> <div class="col-xs-4" id="uploadDiv" style="margin:0px auto; height:90px; line-height:90px;"> <div style="width:90%; height:100%; border:dashed 1px #ddd;" class="ImageBox"> <input type="file" name="mulUp[]" multiple="multiple" required="required" id="SelectFile" style="display:none;" /> <div class="webuploader_pick">+</div> </div> </div> <div class="col-xs-4" style="margin: 0px auto; height:90px; line-height:90px;display:none;" id="Image1"></div>
<input type="hidden" id="HiddenImageStr" /> </div>
这里 只是上传一张图片的示例,需要上传多张的请自行修改。
相关样式
.webuploader_pick { -moz-user-select: none; border-radius: 3px; color: #cccccc; cursor: pointer; display: inline-block; float: left; font-size: 80px; text-align: center; line-height: 90px; transition: border 0.2s; -moz-transition: border 0.2s; -webkit-transition: border 0.2s; -o-transition: border 0.2s; width: 100%; }
JS处理代码:
var FileArray = new Array(); FileArray = []; var IsUpload = 0; $(function () { // 初始化 $(".webuploader_pick").bind("click", function (e) { $("#SelectFile").click(); }); //上传图片相关 var photo = $("#SelectFile"); photo.on('change', function (event) { Compress(event, function (base64Img) { $.ajax({ type: "POST", url: "", //你的上传处理文件 data: JSON.stringify({ "FileString": base64Img, //图片的base64字符串 "Angle": $("#HiddenImageStr").val() //记录拍摄角度的东西 }), contentType: "application/json;charset=utf-8", dataType: "text", cache: false, success: function (text) { //alert(text); FileArray.push(text); var serve_path = ''; //根据存入 FileArray d的文件信息做相应操作 for (var k = 0; k < FileArray.length; k++) { //取出数据做处理 var st = FileArray[k]; var str = st.split('|'); var savepath = str[0]; var imageName = str[1]; var ImageHtml = ""; ImageHtml += "<div style=\"width:90%; height:90px;background-size:100% 90px;background-repeat:no-repeat;background-image:url('" + serve_path + savepath + imageName + "')\">"; ImageHtml += "<div style=\"float:right; right:0px;top:0px; width:30px; height:30px;\" onclick=\"ToDelImage()\">"; ImageHtml += "<img alt=\"\" src=\"@Url.Content("~/Content/images/TalkAbout/icon_delete_03.png")\" style=\"width:15px;height:15px; float:right; margin-top:0px;margin-right:0px;\"/>"; ImageHtml += "</div>"; ImageHtml += "<input type=\"hidden\" id=\"hiddenUploadImage\" value=\"" + st + "\"/>"; ImageHtml += "</div>"; $("#Image1").empty(); $("#Image1").html(ImageHtml); $("#Image1").show(); $("#uploadDiv").hide(); IsUpload++; } FileArray = []; }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus + errorThrown); } }); }); }); function Compress(event, callback) { if (window.File && window.FileList) { var fileCount = document.getElementById("SelectFile").files.length; if (fileCount > 1) { layer.confirm('每次可上传1张图片!', { btn: ['确定'], icon: 0 }); return; } else { //检查上传文件的类型 var files = document.getElementById("SelectFile").files; for (var i = 0; i < files.length; i++) { var t = files[i].type.toLowerCase(); var s = files[i].size; //判断是否为图片类型 var isImage = 0; if (t.indexOf('jpg') >= 0) isImage++; if (t.indexOf('jpeg') >= 0) isImage++; if (t.indexOf('png') >= 0) isImage++; if (t.indexOf('gif') >= 0) isImage++; if (t.indexOf('bmp') >= 0) isImage++; if (isImage == 0) { layer.confirm('请选择图片类型文件上传!', { btn: ['确定'], icon: 0 }); return; } } if (files && files[0]) { EXIF.getData(files[0], function () { EXIF.getAllTags(this); var Orient = EXIF.getTag(this, 'Orientation'); //这个就是记录拍摄角度的东西 var FR = new FileReader(); FR.onload = function (e) { //获得一个图片对象 var image = $("<img />"); image.on('load', function () { var actWidth; var actHeight; var maxwidth = 800; //手机上最宽的定为800像素,太大的没有必要。可自行修改 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var Rorateangel;
<span style="white-space:pre"></span> //这个是拍摄角度正常,或者没有设置过的 if (typeof (Orient) == "undefined" || parseInt(Orient) == 1) { Rorateangel = 1; actWidth = this.width; actHeight = this.height; var scale = actWidth / actHeight; if (actWidth > maxwidth) { canvas.width = maxwidth; canvas.height = parseInt(maxwidth / scale); } else { canvas.width = actWidth; canvas.height = actHeight; } } else if (parseInt(Orient) >= 3) { Rorateangel = parseInt(Orient); switch (Orient) { case 6: //拍摄时左转了90度 { actWidth = this.height; actHeight = this.width; var scale = actWidth / actHeight; if (actWidth > maxwidth) { canvas.height = maxwidth; canvas.width = parseInt(maxwidth / scale); } else { canvas.width = actWidth; canvas.height = actHeight; } } break; case 8: //拍摄时右转了90度 { actWidth = this.height; actHeight = this.width; var scale = actWidth / actHeight; if (actWidth > maxwidth) { canvas.height = maxwidth; canvas.width = parseInt(maxwidth / scale); } else { canvas.width = actWidth; canvas.height = actHeight; } } break; case 3: //拍摄是 翻转了180度 { actWidth = this.width; actHeight = this.height; var scale = actWidth / actHeight; if (actWidth > maxwidth) { canvas.width = maxwidth; canvas.height = parseInt(maxwidth / scale); } else { canvas.width = actWidth; canvas.height = actHeight; } } break; } } $("#HiddenImageStr").val(Rorateangel); //这个就是页面 用一个隐藏域放置翻转角度的值 ctx.drawImage(this, 0, 0, canvas.width, canvas.height); var base64 = canvas.toDataURL('image/jpeg', 0.5); callback(base64); }); image.attr('src', e.target.result); }; FR.readAsDataURL(files[0]); }); } } } else { layer.confirm('抱歉,你的浏览器不支持FileAPI,请升级浏览器!', { btn: ['确定'], icon: 0 }); return; } } }); //删除上传的图片方法 function ToDelImage() { var deleteValue = $("#hiddenUploadImage").val(); $("#Image1").empty(); $("#Image1").hide(); $("#uploadDiv").show(); IsUpload--; FileArray = []; //在服务器上删除文件 $.ajax({ type: "POST", url: "", //删除图片的处理URL data: JSON.stringify({ "delString": deleteValue }), contentType: "application/json;charset=utf-8", dataType: "text", cache: false, success: function (text) { } }); }
最后补上c#这里的处理部分
/// <summary> /// 处理上传字符串保存为图片的方法 /// </summary> /// <param name="FileString">上传的base64字符串</param> /// <param name="Angle">拍摄的角度</param> /// <returns></returns> [HttpPost] public string GetUpLoadFileString(string FileString, string Angle) { int index = FileString.IndexOf(','); FileString = FileString.Substring(index + 1); string p = Server.MapPath("~/Upload/") + DateTime.Now.Year + "" + DateTime.Now.Month + @"/"; if (!Directory.Exists(p)) { Directory.CreateDirectory(p); } try { byte[] arr = Convert.FromBase64String(FileString); MemoryStream ms = new MemoryStream(arr); Bitmap bmp = new Bitmap(ms); string SavePath = "/Upload/" + DateTime.Now.Year + "" + DateTime.Now.Month + @"/"; string newFileName = Guid.NewGuid().ToString() + ".jpg"; //根据传递来的参数决定图片的旋转方向 int rorateAngle = int.Parse(Angle); //顺时针转90度 if (rorateAngle == 6) { bmp.RotateFlip(RotateFlipType.Rotate90FlipNone); } //逆时针转90度 if (rorateAngle == 8) { bmp.RotateFlip(RotateFlipType.Rotate270FlipNone); } //翻转180度 if (rorateAngle == 3) { bmp.RotateFlip(RotateFlipType.Rotate180FlipNone); } //统一将上传的图片存为jpg格式 bmp.Save(p + newFileName, System.Drawing.Imaging.ImageFormat.Jpeg); //bmp.Save(txtFileName + ".bmp", ImageFormat.Bmp); //bmp.Save(txtFileName + ".gif", ImageFormat.Gif); //bmp.Save(txtFileName + ".png", ImageFormat.Png); ms.Close(); return SavePath + "|" + newFileName; } catch (Exception ex) { return ex.Message; } }
1 0
- 微信内网页某些安卓手机不能上传图片文件的问题(2)
- 微信内网页某些安卓手机不能上传图片文件的问题(1)
- 对于支持上传文件的手机浏览器出现的图片不能预览问题的解决办法
- iOS - 关于上传手机本地图片到网页的问题
- 上传手机图片的问题(2)
- 手机网页版JS压缩上传图片--base64位 兼容IOS和安卓
- 上传手机图片的问题
- 安卓开发小米4,酷派 手机适配和调用系统相机相册做图片上传的问题
- 安卓上传图片实例,multipart/form-data实现安卓上传文件的功能
- [Phonegap+Sencha Touch] 移动开发39 某些安卓手机的webview使用location.href="tel:123456"不能调到打电话的界面
- 微信小程序安卓手机上传多张图片的实现方案
- 有用的meta设置解决网页内容不能适应某些浏览器宽度的问题
- 解决安卓手机不能看chm文件的一种思路
- 不能上传文件问题的总结
- vsftpd不能上传文件的问题
- svn不能上传.a文件的问题
- 安卓开发下载图片保存到手机后图片没在相册看到的问题
- 安卓上传图片
- 健忘的人
- UIAlertController在ios8的使用
- Python代码优化:第二部分
- Spring+Encache简单整合
- 服务器获取客户端IP的方法
- 微信内网页某些安卓手机不能上传图片文件的问题(2)
- Erlang 杂记2
- idea的快捷键
- 有关linux下redis overcommit_memory的问题
- iptables移植到ARM Linux教程
- 侧滑菜单
- Chrome开发者工具不完全指南(一、基础功能篇)
- 1.2.1 案例-IP 拨号器
- 【C++】请输入100以内的因数