├── 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 | 
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 |
--------------------------------------------------------------------------------