image-test

├── README.md ├── base64image.js ├── exif.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## 简介 3 | 4 | JS前端上传图片、压缩、并且处理旋转问题，生成base64数据 5 | 6 | ### 演示地址 7 | 8 | http://www.tkc8.com/test/pic/index.html 9 | 10 | 11 | ## 示例代码 12 | 13 | ``` 14 | 15 | 16 | 17 | 18 | image-test 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

27 | 28 | 43 | 44 | 45 | 46 | ``` 47 | 48 | ## 交流方式 49 | 50 | ### 联系我们 51 | 52 | QQ群： 298420174 53 | 54 | ![图片名称](http://www.tkc8.com/index_files/Image%20[10].png) 55 | 56 | 作者： Sponge 57 | 邮箱： 1796512918@qq.com 58 | 59 | 60 | -------------------------------------------------------------------------------- /base64image.js: -------------------------------------------------------------------------------- 1 | var base64Image = function (param) { 2 | 3 | var fileInput = param.file; 4 | 5 | var widthInput = param.width ? param.width : 750; 6 | 7 | var ratioInput = param.ratio ? param.ratio : 0.75; 8 | 9 | var callback = param.callback ? param.callback : null; 10 | 11 | if (!window.FileReader) { 12 | alert("请升级浏览器"); 13 | return; 14 | } 15 | var file = fileInput.files[0]; 16 | var reader = new FileReader(); 17 | 18 | /*判断图片方向*/ 19 | var orientation = null; 20 | EXIF.getData(file, function () { 21 | //EXIF.getAllTags(this); 22 | orientation = EXIF.getTag(this, 'Orientation'); 23 | reader.readAsDataURL(file); 24 | }); 25 | 26 | reader.onloadstart = function () { 27 | }; 28 | reader.onerror = function () { 29 | }; 30 | reader.onload = function () { 31 | /*创建新的图片JS对象*/ 32 | fileInput.value=""; 33 | 34 | /*创建新的图片JS对象*/ 35 | var image = new Image(); 36 | image.src = this.result; 37 | image.onload = function () { 38 | var canvas = document.createElement("canvas"); 39 | var scale = image.width / image.height; 40 | if (orientation == 6) { 41 | //右转 90 42 | canvas.width = image.height < widthInput ? image.height : widthInput; 43 | canvas.height = parseInt(canvas.width * scale); 44 | canvas.getContext("2d").rotate(90 * Math.PI / 180); 45 | canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, -canvas.width, canvas.height, canvas.width); 46 | } else if (orientation == 8) { 47 | //左转 90 48 | canvas.width = image.height < widthInput ? image.height : widthInput; 49 | canvas.height = parseInt(canvas.width * scale); 50 | canvas.getContext("2d").rotate(-90 * Math.PI / 180); 51 | canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, -canvas.height, 0, canvas.height, canvas.width); 52 | } else if (orientation == 3) { 53 | //右转 180 54 | canvas.width = image.width < widthInput ? image.width : widthInput; 55 | canvas.height = parseInt(canvas.width / scale); 56 | canvas.getContext("2d").translate(canvas.width, 0); 57 | canvas.getContext("2d").scale(-1, 1); 58 | canvas.getContext("2d").translate(0, canvas.height); 59 | canvas.getContext("2d").scale(1, -1); 60 | canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height); 61 | } else { 62 | //正常 63 | canvas.width = image.width < widthInput ? image.width : widthInput; 64 | canvas.height = parseInt(canvas.width / scale); 65 | canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height); 66 | } 67 | var imageUrl = canvas.toDataURL("image/jpeg", ratioInput); 68 | 69 | if (callback) { 70 | callback(imageUrl) 71 | } 72 | }; 73 | }; 74 | 75 | }; -------------------------------------------------------------------------------- /exif.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var debug = false; 4 | 5 | var root = this; 6 | 7 | var EXIF = function(obj) { 8 | if (obj instanceof EXIF) return obj; 9 | if (!(this instanceof EXIF)) return new EXIF(obj); 10 | this.EXIFwrapped = obj; 11 | }; 12 | 13 | if (typeof exports !== 'undefined') { 14 | if (typeof module !== 'undefined' && module.exports) { 15 | exports = module.exports = EXIF; 16 | } 17 | exports.EXIF = EXIF; 18 | } else { 19 | root.EXIF = EXIF; 20 | } 21 | 22 | var ExifTags = EXIF.Tags = { 23 | 24 | // version tags 25 | 0x9000 : "ExifVersion", // EXIF version 26 | 0xA000 : "FlashpixVersion", // Flashpix format version 27 | 28 | // colorspace tags 29 | 0xA001 : "ColorSpace", // Color space information tag 30 | 31 | // image configuration 32 | 0xA002 : "PixelXDimension", // Valid width of meaningful image 33 | 0xA003 : "PixelYDimension", // Valid height of meaningful image 34 | 0x9101 : "ComponentsConfiguration", // Information about channels 35 | 0x9102 : "CompressedBitsPerPixel", // Compressed bits per pixel 36 | 37 | // user information 38 | 0x927C : "MakerNote", // Any desired information written by the manufacturer 39 | 0x9286 : "UserComment", // Comments by user 40 | 41 | // related file 42 | 0xA004 : "RelatedSoundFile", // Name of related sound file 43 | 44 | // date and time 45 | 0x9003 : "DateTimeOriginal", // Date and time when the original image was generated 46 | 0x9004 : "DateTimeDigitized", // Date and time when the image was stored digitally 47 | 0x9290 : "SubsecTime", // Fractions of seconds for DateTime 48 | 0x9291 : "SubsecTimeOriginal", // Fractions of seconds for DateTimeOriginal 49 | 0x9292 : "SubsecTimeDigitized", // Fractions of seconds for DateTimeDigitized 50 | 51 | // picture-taking conditions 52 | 0x829A : "ExposureTime", // Exposure time (in seconds) 53 | 0x829D : "FNumber", // F number 54 | 0x8822 : "ExposureProgram", // Exposure program 55 | 0x8824 : "SpectralSensitivity", // Spectral sensitivity 56 | 0x8827 : "ISOSpeedRatings", // ISO speed rating 57 | 0x8828 : "OECF", // Optoelectric conversion factor 58 | 0x9201 : "ShutterSpeedValue", // Shutter speed 59 | 0x9202 : "ApertureValue", // Lens aperture 60 | 0x9203 : "BrightnessValue", // Value of brightness 61 | 0x9204 : "ExposureBias", // Exposure bias 62 | 0x9205 : "MaxApertureValue", // Smallest F number of lens 63 | 0x9206 : "SubjectDistance", // Distance to subject in meters 64 | 0x9207 : "MeteringMode", // Metering mode 65 | 0x9208 : "LightSource", // Kind of light source 66 | 0x9209 : "Flash", // Flash status 67 | 0x9214 : "SubjectArea", // Location and area of main subject 68 | 0x920A : "FocalLength", // Focal length of the lens in mm 69 | 0xA20B : "FlashEnergy", // Strobe energy in BCPS 70 | 0xA20C : "SpatialFrequencyResponse", // 71 | 0xA20E : "FocalPlaneXResolution", // Number of pixels in width direction per FocalPlaneResolutionUnit 72 | 0xA20F : "FocalPlaneYResolution", // Number of pixels in height direction per FocalPlaneResolutionUnit 73 | 0xA210 : "FocalPlaneResolutionUnit", // Unit for measuring FocalPlaneXResolution and FocalPlaneYResolution 74 | 0xA214 : "SubjectLocation", // Location of subject in image 75 | 0xA215 : "ExposureIndex", // Exposure index selected on camera 76 | 0xA217 : "SensingMethod", // Image sensor type 77 | 0xA300 : "FileSource", // Image source (3 == DSC) 78 | 0xA301 : "SceneType", // Scene type (1 == directly photographed) 79 | 0xA302 : "CFAPattern", // Color filter array geometric pattern 80 | 0xA401 : "CustomRendered", // Special processing 81 | 0xA402 : "ExposureMode", // Exposure mode 82 | 0xA403 : "WhiteBalance", // 1 = auto white balance, 2 = manual 83 | 0xA404 : "DigitalZoomRation", // Digital zoom ratio 84 | 0xA405 : "FocalLengthIn35mmFilm", // Equivalent foacl length assuming 35mm film camera (in mm) 85 | 0xA406 : "SceneCaptureType", // Type of scene 86 | 0xA407 : "GainControl", // Degree of overall image gain adjustment 87 | 0xA408 : "Contrast", // Direction of contrast processing applied by camera 88 | 0xA409 : "Saturation", // Direction of saturation processing applied by camera 89 | 0xA40A : "Sharpness", // Direction of sharpness processing applied by camera 90 | 0xA40B : "DeviceSettingDescription", // 91 | 0xA40C : "SubjectDistanceRange", // Distance to subject 92 | 93 | // other tags 94 | 0xA005 : "InteroperabilityIFDPointer", 95 | 0xA420 : "ImageUniqueID" // Identifier assigned uniquely to each image 96 | }; 97 | 98 | var TiffTags = EXIF.TiffTags = { 99 | 0x0100 : "ImageWidth", 100 | 0x0101 : "ImageHeight", 101 | 0x8769 : "ExifIFDPointer", 102 | 0x8825 : "GPSInfoIFDPointer", 103 | 0xA005 : "InteroperabilityIFDPointer", 104 | 0x0102 : "BitsPerSample", 105 | 0x0103 : "Compression", 106 | 0x0106 : "PhotometricInterpretation", 107 | 0x0112 : "Orientation", 108 | 0x0115 : "SamplesPerPixel", 109 | 0x011C : "PlanarConfiguration", 110 | 0x0212 : "YCbCrSubSampling", 111 | 0x0213 : "YCbCrPositioning", 112 | 0x011A : "XResolution", 113 | 0x011B : "YResolution", 114 | 0x0128 : "ResolutionUnit", 115 | 0x0111 : "StripOffsets", 116 | 0x0116 : "RowsPerStrip", 117 | 0x0117 : "StripByteCounts", 118 | 0x0201 : "JPEGInterchangeFormat", 119 | 0x0202 : "JPEGInterchangeFormatLength", 120 | 0x012D : "TransferFunction", 121 | 0x013E : "WhitePoint", 122 | 0x013F : "PrimaryChromaticities", 123 | 0x0211 : "YCbCrCoefficients", 124 | 0x0214 : "ReferenceBlackWhite", 125 | 0x0132 : "DateTime", 126 | 0x010E : "ImageDescription", 127 | 0x010F : "Make", 128 | 0x0110 : "Model", 129 | 0x0131 : "Software", 130 | 0x013B : "Artist", 131 | 0x8298 : "Copyright" 132 | }; 133 | 134 | var GPSTags = EXIF.GPSTags = { 135 | 0x0000 : "GPSVersionID", 136 | 0x0001 : "GPSLatitudeRef", 137 | 0x0002 : "GPSLatitude", 138 | 0x0003 : "GPSLongitudeRef", 139 | 0x0004 : "GPSLongitude", 140 | 0x0005 : "GPSAltitudeRef", 141 | 0x0006 : "GPSAltitude", 142 | 0x0007 : "GPSTimeStamp", 143 | 0x0008 : "GPSSatellites", 144 | 0x0009 : "GPSStatus", 145 | 0x000A : "GPSMeasureMode", 146 | 0x000B : "GPSDOP", 147 | 0x000C : "GPSSpeedRef", 148 | 0x000D : "GPSSpeed", 149 | 0x000E : "GPSTrackRef", 150 | 0x000F : "GPSTrack", 151 | 0x0010 : "GPSImgDirectionRef", 152 | 0x0011 : "GPSImgDirection", 153 | 0x0012 : "GPSMapDatum", 154 | 0x0013 : "GPSDestLatitudeRef", 155 | 0x0014 : "GPSDestLatitude", 156 | 0x0015 : "GPSDestLongitudeRef", 157 | 0x0016 : "GPSDestLongitude", 158 | 0x0017 : "GPSDestBearingRef", 159 | 0x0018 : "GPSDestBearing", 160 | 0x0019 : "GPSDestDistanceRef", 161 | 0x001A : "GPSDestDistance", 162 | 0x001B : "GPSProcessingMethod", 163 | 0x001C : "GPSAreaInformation", 164 | 0x001D : "GPSDateStamp", 165 | 0x001E : "GPSDifferential" 166 | }; 167 | 168 | // EXIF 2.3 Spec 169 | var IFD1Tags = EXIF.IFD1Tags = { 170 | 0x0100: "ImageWidth", 171 | 0x0101: "ImageHeight", 172 | 0x0102: "BitsPerSample", 173 | 0x0103: "Compression", 174 | 0x0106: "PhotometricInterpretation", 175 | 0x0111: "StripOffsets", 176 | 0x0112: "Orientation", 177 | 0x0115: "SamplesPerPixel", 178 | 0x0116: "RowsPerStrip", 179 | 0x0117: "StripByteCounts", 180 | 0x011A: "XResolution", 181 | 0x011B: "YResolution", 182 | 0x011C: "PlanarConfiguration", 183 | 0x0128: "ResolutionUnit", 184 | 0x0201: "JpegIFOffset", // When image format is JPEG, this value show offset to JPEG data stored.(aka "ThumbnailOffset" or "JPEGInterchangeFormat") 185 | 0x0202: "JpegIFByteCount", // When image format is JPEG, this value shows data size of JPEG image (aka "ThumbnailLength" or "JPEGInterchangeFormatLength") 186 | 0x0211: "YCbCrCoefficients", 187 | 0x0212: "YCbCrSubSampling", 188 | 0x0213: "YCbCrPositioning", 189 | 0x0214: "ReferenceBlackWhite" 190 | }; 191 | 192 | var StringValues = EXIF.StringValues = { 193 | ExposureProgram : { 194 | 0 : "Not defined", 195 | 1 : "Manual", 196 | 2 : "Normal program", 197 | 3 : "Aperture priority", 198 | 4 : "Shutter priority", 199 | 5 : "Creative program", 200 | 6 : "Action program", 201 | 7 : "Portrait mode", 202 | 8 : "Landscape mode" 203 | }, 204 | MeteringMode : { 205 | 0 : "Unknown", 206 | 1 : "Average", 207 | 2 : "CenterWeightedAverage", 208 | 3 : "Spot", 209 | 4 : "MultiSpot", 210 | 5 : "Pattern", 211 | 6 : "Partial", 212 | 255 : "Other" 213 | }, 214 | LightSource : { 215 | 0 : "Unknown", 216 | 1 : "Daylight", 217 | 2 : "Fluorescent", 218 | 3 : "Tungsten (incandescent light)", 219 | 4 : "Flash", 220 | 9 : "Fine weather", 221 | 10 : "Cloudy weather", 222 | 11 : "Shade", 223 | 12 : "Daylight fluorescent (D 5700 - 7100K)", 224 | 13 : "Day white fluorescent (N 4600 - 5400K)", 225 | 14 : "Cool white fluorescent (W 3900 - 4500K)", 226 | 15 : "White fluorescent (WW 3200 - 3700K)", 227 | 17 : "Standard light A", 228 | 18 : "Standard light B", 229 | 19 : "Standard light C", 230 | 20 : "D55", 231 | 21 : "D65", 232 | 22 : "D75", 233 | 23 : "D50", 234 | 24 : "ISO studio tungsten", 235 | 255 : "Other" 236 | }, 237 | Flash : { 238 | 0x0000 : "Flash did not fire", 239 | 0x0001 : "Flash fired", 240 | 0x0005 : "Strobe return light not detected", 241 | 0x0007 : "Strobe return light detected", 242 | 0x0009 : "Flash fired, compulsory flash mode", 243 | 0x000D : "Flash fired, compulsory flash mode, return light not detected", 244 | 0x000F : "Flash fired, compulsory flash mode, return light detected", 245 | 0x0010 : "Flash did not fire, compulsory flash mode", 246 | 0x0018 : "Flash did not fire, auto mode", 247 | 0x0019 : "Flash fired, auto mode", 248 | 0x001D : "Flash fired, auto mode, return light not detected", 249 | 0x001F : "Flash fired, auto mode, return light detected", 250 | 0x0020 : "No flash function", 251 | 0x0041 : "Flash fired, red-eye reduction mode", 252 | 0x0045 : "Flash fired, red-eye reduction mode, return light not detected", 253 | 0x0047 : "Flash fired, red-eye reduction mode, return light detected", 254 | 0x0049 : "Flash fired, compulsory flash mode, red-eye reduction mode", 255 | 0x004D : "Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected", 256 | 0x004F : "Flash fired, compulsory flash mode, red-eye reduction mode, return light detected", 257 | 0x0059 : "Flash fired, auto mode, red-eye reduction mode", 258 | 0x005D : "Flash fired, auto mode, return light not detected, red-eye reduction mode", 259 | 0x005F : "Flash fired, auto mode, return light detected, red-eye reduction mode" 260 | }, 261 | SensingMethod : { 262 | 1 : "Not defined", 263 | 2 : "One-chip color area sensor", 264 | 3 : "Two-chip color area sensor", 265 | 4 : "Three-chip color area sensor", 266 | 5 : "Color sequential area sensor", 267 | 7 : "Trilinear sensor", 268 | 8 : "Color sequential linear sensor" 269 | }, 270 | SceneCaptureType : { 271 | 0 : "Standard", 272 | 1 : "Landscape", 273 | 2 : "Portrait", 274 | 3 : "Night scene" 275 | }, 276 | SceneType : { 277 | 1 : "Directly photographed" 278 | }, 279 | CustomRendered : { 280 | 0 : "Normal process", 281 | 1 : "Custom process" 282 | }, 283 | WhiteBalance : { 284 | 0 : "Auto white balance", 285 | 1 : "Manual white balance" 286 | }, 287 | GainControl : { 288 | 0 : "None", 289 | 1 : "Low gain up", 290 | 2 : "High gain up", 291 | 3 : "Low gain down", 292 | 4 : "High gain down" 293 | }, 294 | Contrast : { 295 | 0 : "Normal", 296 | 1 : "Soft", 297 | 2 : "Hard" 298 | }, 299 | Saturation : { 300 | 0 : "Normal", 301 | 1 : "Low saturation", 302 | 2 : "High saturation" 303 | }, 304 | Sharpness : { 305 | 0 : "Normal", 306 | 1 : "Soft", 307 | 2 : "Hard" 308 | }, 309 | SubjectDistanceRange : { 310 | 0 : "Unknown", 311 | 1 : "Macro", 312 | 2 : "Close view", 313 | 3 : "Distant view" 314 | }, 315 | FileSource : { 316 | 3 : "DSC" 317 | }, 318 | 319 | Components : { 320 | 0 : "", 321 | 1 : "Y", 322 | 2 : "Cb", 323 | 3 : "Cr", 324 | 4 : "R", 325 | 5 : "G", 326 | 6 : "B" 327 | } 328 | }; 329 | 330 | function addEvent(element, event, handler) { 331 | if (element.addEventListener) { 332 | element.addEventListener(event, handler, false); 333 | } else if (element.attachEvent) { 334 | element.attachEvent("on" + event, handler); 335 | } 336 | } 337 | 338 | function imageHasData(img) { 339 | return !!(img.exifdata); 340 | } 341 | 342 | 343 | function base64ToArrayBuffer(base64, contentType) { 344 | contentType = contentType || base64.match(/^data\:([^\;]+)\;base64,/mi)[1] || ''; // e.g. 'data:image/jpeg;base64,...' => 'image/jpeg' 345 | base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, ''); 346 | var binary = atob(base64); 347 | var len = binary.length; 348 | var buffer = new ArrayBuffer(len); 349 | var view = new Uint8Array(buffer); 350 | for (var i = 0; i < len; i++) { 351 | view[i] = binary.charCodeAt(i); 352 | } 353 | return buffer; 354 | } 355 | 356 | function objectURLToBlob(url, callback) { 357 | var http = new XMLHttpRequest(); 358 | http.open("GET", url, true); 359 | http.responseType = "blob"; 360 | http.onload = function(e) { 361 | if (this.status == 200 || this.status === 0) { 362 | callback(this.response); 363 | } 364 | }; 365 | http.send(); 366 | } 367 | 368 | function getImageData(img, callback) { 369 | function handleBinaryFile(binFile) { 370 | var data = findEXIFinJPEG(binFile); 371 | var iptcdata = findIPTCinJPEG(binFile); 372 | var xmpdata= findXMPinJPEG(binFile); 373 | img.exifdata = data || {}; 374 | img.iptcdata = iptcdata || {}; 375 | img.xmpdata = xmpdata || {}; 376 | if (callback) { 377 | callback.call(img); 378 | } 379 | } 380 | 381 | if (img.src) { 382 | if (/^data\:/i.test(img.src)) { // Data URI 383 | var arrayBuffer = base64ToArrayBuffer(img.src); 384 | handleBinaryFile(arrayBuffer); 385 | 386 | } else if (/^blob\:/i.test(img.src)) { // Object URL 387 | var fileReader = new FileReader(); 388 | fileReader.onload = function(e) { 389 | handleBinaryFile(e.target.result); 390 | }; 391 | objectURLToBlob(img.src, function (blob) { 392 | fileReader.readAsArrayBuffer(blob); 393 | }); 394 | } else { 395 | var http = new XMLHttpRequest(); 396 | http.onload = function() { 397 | if (this.status == 200 || this.status === 0) { 398 | handleBinaryFile(http.response); 399 | } else { 400 | throw "Could not load image"; 401 | } 402 | http = null; 403 | }; 404 | http.open("GET", img.src, true); 405 | http.responseType = "arraybuffer"; 406 | http.send(null); 407 | } 408 | } else if (self.FileReader && (img instanceof self.Blob || img instanceof self.File)) { 409 | var fileReader = new FileReader(); 410 | fileReader.onload = function(e) { 411 | if (debug) console.log("Got file of length " + e.target.result.byteLength); 412 | handleBinaryFile(e.target.result); 413 | }; 414 | 415 | fileReader.readAsArrayBuffer(img); 416 | } 417 | } 418 | 419 | function findEXIFinJPEG(file) { 420 | var dataView = new DataView(file); 421 | 422 | if (debug) console.log("Got file of length " + file.byteLength); 423 | if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) { 424 | if (debug) console.log("Not a valid JPEG"); 425 | return false; // not a valid jpeg 426 | } 427 | 428 | var offset = 2, 429 | length = file.byteLength, 430 | marker; 431 | 432 | while (offset < length) { 433 | if (dataView.getUint8(offset) != 0xFF) { 434 | if (debug) console.log("Not a valid marker at offset " + offset + ", found: " + dataView.getUint8(offset)); 435 | return false; // not a valid marker, something is wrong 436 | } 437 | 438 | marker = dataView.getUint8(offset + 1); 439 | if (debug) console.log(marker); 440 | 441 | // we could implement handling for other markers here, 442 | // but we're only looking for 0xFFE1 for EXIF data 443 | 444 | if (marker == 225) { 445 | if (debug) console.log("Found 0xFFE1 marker"); 446 | 447 | return readEXIFData(dataView, offset + 4, dataView.getUint16(offset + 2) - 2); 448 | 449 | // offset += 2 + file.getShortAt(offset+2, true); 450 | 451 | } else { 452 | offset += 2 + dataView.getUint16(offset+2); 453 | } 454 | 455 | } 456 | 457 | } 458 | 459 | function findIPTCinJPEG(file) { 460 | var dataView = new DataView(file); 461 | 462 | if (debug) console.log("Got file of length " + file.byteLength); 463 | if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) { 464 | if (debug) console.log("Not a valid JPEG"); 465 | return false; // not a valid jpeg 466 | } 467 | 468 | var offset = 2, 469 | length = file.byteLength; 470 | 471 | 472 | var isFieldSegmentStart = function(dataView, offset){ 473 | return ( 474 | dataView.getUint8(offset) === 0x38 && 475 | dataView.getUint8(offset+1) === 0x42 && 476 | dataView.getUint8(offset+2) === 0x49 && 477 | dataView.getUint8(offset+3) === 0x4D && 478 | dataView.getUint8(offset+4) === 0x04 && 479 | dataView.getUint8(offset+5) === 0x04 480 | ); 481 | }; 482 | 483 | while (offset < length) { 484 | 485 | if ( isFieldSegmentStart(dataView, offset )){ 486 | 487 | // Get the length of the name header (which is padded to an even number of bytes) 488 | var nameHeaderLength = dataView.getUint8(offset+7); 489 | if(nameHeaderLength % 2 !== 0) nameHeaderLength += 1; 490 | // Check for pre photoshop 6 format 491 | if(nameHeaderLength === 0) { 492 | // Always 4 493 | nameHeaderLength = 4; 494 | } 495 | 496 | var startOffset = offset + 8 + nameHeaderLength; 497 | var sectionLength = dataView.getUint16(offset + 6 + nameHeaderLength); 498 | 499 | return readIPTCData(file, startOffset, sectionLength); 500 | 501 | break; 502 | 503 | } 504 | 505 | 506 | // Not the marker, continue searching 507 | offset++; 508 | 509 | } 510 | 511 | } 512 | var IptcFieldMap = { 513 | 0x78 : 'caption', 514 | 0x6E : 'credit', 515 | 0x19 : 'keywords', 516 | 0x37 : 'dateCreated', 517 | 0x50 : 'byline', 518 | 0x55 : 'bylineTitle', 519 | 0x7A : 'captionWriter', 520 | 0x69 : 'headline', 521 | 0x74 : 'copyright', 522 | 0x0F : 'category' 523 | }; 524 | function readIPTCData(file, startOffset, sectionLength){ 525 | var dataView = new DataView(file); 526 | var data = {}; 527 | var fieldValue, fieldName, dataSize, segmentType, segmentSize; 528 | var segmentStartPos = startOffset; 529 | while(segmentStartPos < startOffset+sectionLength) { 530 | if(dataView.getUint8(segmentStartPos) === 0x1C && dataView.getUint8(segmentStartPos+1) === 0x02){ 531 | segmentType = dataView.getUint8(segmentStartPos+2); 532 | if(segmentType in IptcFieldMap) { 533 | dataSize = dataView.getInt16(segmentStartPos+3); 534 | segmentSize = dataSize + 5; 535 | fieldName = IptcFieldMap[segmentType]; 536 | fieldValue = getStringFromDB(dataView, segmentStartPos+5, dataSize); 537 | // Check if we already stored a value with this name 538 | if(data.hasOwnProperty(fieldName)) { 539 | // Value already stored with this name, create multivalue field 540 | if(data[fieldName] instanceof Array) { 541 | data[fieldName].push(fieldValue); 542 | } 543 | else { 544 | data[fieldName] = [data[fieldName], fieldValue]; 545 | } 546 | } 547 | else { 548 | data[fieldName] = fieldValue; 549 | } 550 | } 551 | 552 | } 553 | segmentStartPos++; 554 | } 555 | return data; 556 | } 557 | 558 | 559 | 560 | function readTags(file, tiffStart, dirStart, strings, bigEnd) { 561 | var entries = file.getUint16(dirStart, !bigEnd), 562 | tags = {}, 563 | entryOffset, tag, 564 | i; 565 | 566 | for (i=0;i 4 ? valueOffset : (entryOffset + 8); 591 | vals = []; 592 | for (n=0;n 4 ? valueOffset : (entryOffset + 8); 600 | return getStringFromDB(file, offset, numValues-1); 601 | 602 | case 3: // short, 16 bit int 603 | if (numValues == 1) { 604 | return file.getUint16(entryOffset + 8, !bigEnd); 605 | } else { 606 | offset = numValues > 2 ? valueOffset : (entryOffset + 8); 607 | vals = []; 608 | for (n=0;n dataView.byteLength) { // this should not happen 693 | // console.log('******** IFD1Offset is outside the bounds of the DataView ********'); 694 | return {}; 695 | } 696 | // console.log('******* thumbnail IFD offset (IFD1) is: %s', IFD1OffsetPointer); 697 | 698 | var thumbTags = readTags(dataView, tiffStart, tiffStart + IFD1OffsetPointer, IFD1Tags, bigEnd) 699 | 700 | // EXIF 2.3 specification for JPEG format thumbnail 701 | 702 | // If the value of Compression(0x0103) Tag in IFD1 is '6', thumbnail image format is JPEG. 703 | // Most of Exif image uses JPEG format for thumbnail. In that case, you can get offset of thumbnail 704 | // by JpegIFOffset(0x0201) Tag in IFD1, size of thumbnail by JpegIFByteCount(0x0202) Tag. 705 | // Data format is ordinary JPEG format, starts from 0xFFD8 and ends by 0xFFD9. It seems that 706 | // JPEG format and 160x120pixels of size are recommended thumbnail format for Exif2.1 or later. 707 | 708 | if (thumbTags['Compression']) { 709 | // console.log('Thumbnail image found!'); 710 | 711 | switch (thumbTags['Compression']) { 712 | case 6: 713 | // console.log('Thumbnail image format is JPEG'); 714 | if (thumbTags.JpegIFOffset && thumbTags.JpegIFByteCount) { 715 | // extract the thumbnail 716 | var tOffset = tiffStart + thumbTags.JpegIFOffset; 717 | var tLength = thumbTags.JpegIFByteCount; 718 | thumbTags['blob'] = new Blob([new Uint8Array(dataView.buffer, tOffset, tLength)], { 719 | type: 'image/jpeg' 720 | }); 721 | } 722 | break; 723 | 724 | case 1: 725 | console.log("Thumbnail image format is TIFF, which is not implemented."); 726 | break; 727 | default: 728 | console.log("Unknown thumbnail image format '%s'", thumbTags['Compression']); 729 | } 730 | } 731 | else if (thumbTags['PhotometricInterpretation'] == 2) { 732 | console.log("Thumbnail image format is RGB, which is not implemented."); 733 | } 734 | return thumbTags; 735 | } 736 | 737 | function getStringFromDB(buffer, start, length) { 738 | var outstr = ""; 739 | for (n = start; n < start+length; n++) { 740 | outstr += String.fromCharCode(buffer.getUint8(n)); 741 | } 742 | return outstr; 743 | } 744 | 745 | function readEXIFData(file, start) { 746 | if (getStringFromDB(file, start, 4) != "Exif") { 747 | if (debug) console.log("Not valid EXIF data! " + getStringFromDB(file, start, 4)); 748 | return false; 749 | } 750 | 751 | var bigEnd, 752 | tags, tag, 753 | exifData, gpsData, 754 | tiffOffset = start + 6; 755 | 756 | // test for TIFF validity and endianness 757 | if (file.getUint16(tiffOffset) == 0x4949) { 758 | bigEnd = false; 759 | } else if (file.getUint16(tiffOffset) == 0x4D4D) { 760 | bigEnd = true; 761 | } else { 762 | if (debug) console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)"); 763 | return false; 764 | } 765 | 766 | if (file.getUint16(tiffOffset+2, !bigEnd) != 0x002A) { 767 | if (debug) console.log("Not valid TIFF data! (no 0x002A)"); 768 | return false; 769 | } 770 | 771 | var firstIFDOffset = file.getUint32(tiffOffset+4, !bigEnd); 772 | 773 | if (firstIFDOffset < 0x00000008) { 774 | if (debug) console.log("Not valid TIFF data! (First offset less than 8)", file.getUint32(tiffOffset+4, !bigEnd)); 775 | return false; 776 | } 777 | 778 | tags = readTags(file, tiffOffset, tiffOffset + firstIFDOffset, TiffTags, bigEnd); 779 | 780 | if (tags.ExifIFDPointer) { 781 | exifData = readTags(file, tiffOffset, tiffOffset + tags.ExifIFDPointer, ExifTags, bigEnd); 782 | for (tag in exifData) { 783 | switch (tag) { 784 | case "LightSource" : 785 | case "Flash" : 786 | case "MeteringMode" : 787 | case "ExposureProgram" : 788 | case "SensingMethod" : 789 | case "SceneCaptureType" : 790 | case "SceneType" : 791 | case "CustomRendered" : 792 | case "WhiteBalance" : 793 | case "GainControl" : 794 | case "Contrast" : 795 | case "Saturation" : 796 | case "Sharpness" : 797 | case "SubjectDistanceRange" : 798 | case "FileSource" : 799 | exifData[tag] = StringValues[tag][exifData[tag]]; 800 | break; 801 | 802 | case "ExifVersion" : 803 | case "FlashpixVersion" : 804 | exifData[tag] = String.fromCharCode(exifData[tag][0], exifData[tag][1], exifData[tag][2], exifData[tag][3]); 805 | break; 806 | 807 | case "ComponentsConfiguration" : 808 | exifData[tag] = 809 | StringValues.Components[exifData[tag][0]] + 810 | StringValues.Components[exifData[tag][1]] + 811 | StringValues.Components[exifData[tag][2]] + 812 | StringValues.Components[exifData[tag][3]]; 813 | break; 814 | } 815 | tags[tag] = exifData[tag]; 816 | } 817 | } 818 | 819 | if (tags.GPSInfoIFDPointer) { 820 | gpsData = readTags(file, tiffOffset, tiffOffset + tags.GPSInfoIFDPointer, GPSTags, bigEnd); 821 | for (tag in gpsData) { 822 | switch (tag) { 823 | case "GPSVersionID" : 824 | gpsData[tag] = gpsData[tag][0] + 825 | "." + gpsData[tag][1] + 826 | "." + gpsData[tag][2] + 827 | "." + gpsData[tag][3]; 828 | break; 829 | } 830 | tags[tag] = gpsData[tag]; 831 | } 832 | } 833 | 834 | // extract thumbnail 835 | tags['thumbnail'] = readThumbnailImage(file, tiffOffset, firstIFDOffset, bigEnd); 836 | 837 | return tags; 838 | } 839 | 840 | function findXMPinJPEG(file) { 841 | 842 | if (!('DOMParser' in self)) { 843 | // console.warn('XML parsing not supported without DOMParser'); 844 | return; 845 | } 846 | var dataView = new DataView(file); 847 | 848 | if (debug) console.log("Got file of length " + file.byteLength); 849 | if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) { 850 | if (debug) console.log("Not a valid JPEG"); 851 | return false; // not a valid jpeg 852 | } 853 | 854 | var offset = 2, 855 | length = file.byteLength, 856 | dom = new DOMParser(); 857 | 858 | while (offset < (length-4)) { 859 | if (getStringFromDB(dataView, offset, 4) == "http") { 860 | var startOffset = offset - 1; 861 | var sectionLength = dataView.getUint16(offset - 2) - 1; 862 | var xmpString = getStringFromDB(dataView, startOffset, sectionLength) 863 | var xmpEndIndex = xmpString.indexOf('xmpmeta>') + 8; 864 | xmpString = xmpString.substring( xmpString.indexOf( ' 0) { 895 | for (var i = 0; i < xml.children.length; i++) { 896 | var item = xml.children.item(i); 897 | var attributes = item.attributes; 898 | for(var idx in attributes) { 899 | var itemAtt = attributes[idx]; 900 | var dataKey = itemAtt.nodeName; 901 | var dataValue = itemAtt.nodeValue; 902 | 903 | if(dataKey !== undefined) { 904 | obj[dataKey] = dataValue; 905 | } 906 | } 907 | var nodeName = item.nodeName; 908 | 909 | if (typeof (obj[nodeName]) == "undefined") { 910 | obj[nodeName] = xml2json(item); 911 | } else { 912 | if (typeof (obj[nodeName].push) == "undefined") { 913 | var old = obj[nodeName]; 914 | 915 | obj[nodeName] = []; 916 | obj[nodeName].push(old); 917 | } 918 | obj[nodeName].push(xml2json(item)); 919 | } 920 | } 921 | } else { 922 | obj = xml.textContent; 923 | } 924 | return obj; 925 | } catch (e) { 926 | console.log(e.message); 927 | } 928 | } 929 | 930 | EXIF.getData = function(img, callback) { 931 | if ((self.Image && img instanceof self.Image) 932 | || (self.HTMLImageElement && img instanceof self.HTMLImageElement) 933 | && !img.complete) 934 | return false; 935 | 936 | if (!imageHasData(img)) { 937 | getImageData(img, callback); 938 | } else { 939 | if (callback) { 940 | callback.call(img); 941 | } 942 | } 943 | return true; 944 | } 945 | 946 | EXIF.getTag = function(img, tag) { 947 | if (!imageHasData(img)) return; 948 | return img.exifdata[tag]; 949 | } 950 | 951 | EXIF.getIptcTag = function(img, tag) { 952 | if (!imageHasData(img)) return; 953 | return img.iptcdata[tag]; 954 | } 955 | 956 | EXIF.getAllTags = function(img) { 957 | if (!imageHasData(img)) return {}; 958 | var a, 959 | data = img.exifdata, 960 | tags = {}; 961 | for (a in data) { 962 | if (data.hasOwnProperty(a)) { 963 | tags[a] = data[a]; 964 | } 965 | } 966 | return tags; 967 | } 968 | 969 | EXIF.getAllIptcTags = function(img) { 970 | if (!imageHasData(img)) return {}; 971 | var a, 972 | data = img.iptcdata, 973 | tags = {}; 974 | for (a in data) { 975 | if (data.hasOwnProperty(a)) { 976 | tags[a] = data[a]; 977 | } 978 | } 979 | return tags; 980 | } 981 | 982 | EXIF.pretty = function(img) { 983 | if (!imageHasData(img)) return ""; 984 | var a, 985 | data = img.exifdata, 986 | strPretty = ""; 987 | for (a in data) { 988 | if (data.hasOwnProperty(a)) { 989 | if (typeof data[a] == "object") { 990 | if (data[a] instanceof Number) { 991 | strPretty += a + " : " + data[a] + " [" + data[a].numerator + "/" + data[a].denominator + "]\r\n"; 992 | } else { 993 | strPretty += a + " : [" + data[a].length + " values]\r\n"; 994 | } 995 | } else { 996 | strPretty += a + " : " + data[a] + "\r\n"; 997 | } 998 | } 999 | } 1000 | return strPretty; 1001 | } 1002 | 1003 | EXIF.readFromBinaryFile = function(file) { 1004 | return findEXIFinJPEG(file); 1005 | } 1006 | 1007 | if (typeof define === 'function' && define.amd) { 1008 | define('exif-js', [], function() { 1009 | return EXIF; 1010 | }); 1011 | } 1012 | }.call(this)); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image-test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 | 28 | 29 | --------------------------------------------------------------------------------