Skip to content

Commit bb0a0fe

Browse files
blueimpblueimp
committed
Store IFD1 (Thumbnail) data in a separate ExifMap.
Retrieving the Thumbnail Blob now requires another method call: https://github.com/blueimp/JavaScript-Load-Image/blob/master/README.md#exif-thumbnail Resolves blueimp#103.
1 parent 8c76ddd commit bb0a0fe

File tree

5 files changed

+84
-57
lines changed

5 files changed

+84
-57
lines changed

‎README.md‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -533,11 +533,17 @@ Example code displaying a thumbnail image embedded into the Exif meta data:
533533
loadImage(
534534
fileOrBlobOrUrl,
535535
function (img, data) {
536-
var thumbBlob = data.exif && data.exif.get('Thumbnail')
537-
if (thumbBlob) {
538-
loadImage(thumbBlob, function (thumbImage) {
539-
document.body.appendChild(thumbImage)
540-
})
536+
var exif = data.exif
537+
var thumbnail = exif && exif.get('Thumbnail')
538+
var blob = thumbnail.get('Blob')
539+
if (blob) {
540+
loadImage(
541+
blob,
542+
function (thumbImage) {
543+
document.body.appendChild(thumbImage)
544+
},
545+
{ orientation: exif.get('Orientation') }
546+
)
541547
}
542548
},
543549
{ meta: true }
@@ -610,7 +616,6 @@ loadImage(
610616
The Exif parser adds additional options:
611617

612618
- `disableExif`: Disables Exif parsing when `true`.
613-
- `disableExifThumbnail`: Disables parsing of Thumbnail data when `true`.
614619
- `disableExifOffsets`: Disables storing Exif tag offsets when `true`.
615620
- `includeExifTags`: A map of Exif tags to include for parsing (includes all but
616621
the excluded tags by default).
@@ -628,8 +633,10 @@ loadImage.parseMetaData(
628633
{
629634
includeExifTags: {
630635
0x0112: true, // Orientation
631-
0x0201: true, // JPEGInterchangeFormat (Thumbnail data offset)
632-
0x0202: true, // JPEGInterchangeFormatLength (Thumbnail data length)
636+
ifd1: {
637+
0x0201: true, // JPEGInterchangeFormat (Thumbnail data offset)
638+
0x0202: true // JPEGInterchangeFormatLength (Thumbnail data length)
639+
},
633640
0x8769: {
634641
// ExifIFDPointer
635642
0x9000: true // ExifVersion

‎css/demo.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,10 @@ tr:nth-child(odd) {
5151
background: #eee;
5252
color: #222;
5353
}
54-
td {
54+
td,
55+
th {
5556
padding: 10px;
57+
text-align: left;
5658
}
5759
#result,
5860
#thumbnail {

‎js/demo/demo.js‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,20 @@ $(function () {
2626
* Displays tag data
2727
*
2828
* @param {*} node jQuery node
29-
* @param {object} tags Tags object
29+
* @param {object} tags Tags map
30+
* @param {string} title Tags title
3031
*/
31-
function displayTagData(node, tags) {
32+
function displayTagData(node, tags, title) {
3233
var table = $('<table></table>')
3334
var row = $('<tr></tr>')
3435
var cell = $('<td></td>')
36+
var headerCell = $('<th colspan="2"></th>')
3537
var prop
38+
table.append(row.clone().append(headerCell.clone().text(title)))
3639
for (prop in tags) {
3740
if (Object.prototype.hasOwnProperty.call(tags, prop)) {
3841
if (typeof tags[prop] === 'object') {
39-
displayTagData(node, tags[prop])
42+
displayTagData(node, tags[prop], prop)
4043
continue
4144
}
4245
table.append(
@@ -84,13 +87,16 @@ $(function () {
8487
var exif = data.exif
8588
var iptc = data.iptc
8689
if (exif) {
87-
displayThumbnailImage(thumbNode, exif.get('Thumbnail'), {
88-
orientation: exif.get('Orientation')
89-
})
90-
displayTagData(exifNode, exif.getAll())
90+
var thumbnail = exif.get('Thumbnail')
91+
if (thumbnail) {
92+
displayThumbnailImage(thumbNode, thumbnail.get('Blob'), {
93+
orientation: exif.get('Orientation')
94+
})
95+
}
96+
displayTagData(exifNode, exif.getAll(), 'TIFF')
9197
}
9298
if (iptc) {
93-
displayTagData(iptcNode, iptc.getAll())
99+
displayTagData(iptcNode, iptc.getAll(), 'IPTC')
94100
}
95101
}
96102

‎js/load-image-exif-map.js‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,9 @@
180180
}
181181
}
182182

183+
// IFD1 directory can contain any IFD0 tags:
184+
ExifMapProto.tags.ifd1 = ExifMapProto.tags
185+
183186
ExifMapProto.stringValues = {
184187
ExposureProgram: {
185188
0: 'Undefined',
@@ -375,7 +378,7 @@
375378
if (Object.prototype.hasOwnProperty.call(this, prop)) {
376379
obj = this[prop]
377380
if (obj && obj.getAll) {
378-
map[this.privateIFDs[prop].name] = obj.getAll()
381+
map[this.ifds[prop].name] = obj.getAll()
379382
} else {
380383
name = this.tags[prop]
381384
if (name) map[name] = this.getText(name)
@@ -387,25 +390,25 @@
387390

388391
ExifMapProto.getName = function (tagCode) {
389392
var name = this.tags[tagCode]
390-
if (typeof name === 'object') return this.privateIFDs[tagCode].name
393+
if (typeof name === 'object') return this.ifds[tagCode].name
391394
return name
392395
}
393396

394397
// Extend the map of tag names to tag codes:
395398
;(function () {
396399
var tags = ExifMapProto.tags
397400
var prop
398-
var privateIFD
401+
var ifd
399402
var subTags
400403
// Map the tag names to tags:
401404
for (prop in tags) {
402405
if (Object.prototype.hasOwnProperty.call(tags, prop)) {
403-
privateIFD = ExifMapProto.privateIFDs[prop]
404-
if (privateIFD) {
406+
ifd = ExifMapProto.ifds[prop]
407+
if (ifd) {
405408
subTags = tags[prop]
406409
for (prop in subTags) {
407410
if (Object.prototype.hasOwnProperty.call(subTags, prop)) {
408-
privateIFD.map[subTags[prop]] = Number(prop)
411+
ifd.map[subTags[prop]] = Number(prop)
409412
}
410413
}
411414
} else {

‎js/load-image-exif.js‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@
3232
*
3333
* @name ExifMap
3434
* @class
35-
* @param {number} tagCode Private IFD tag code
35+
* @param {number|string} tagCode IFD tag code
3636
*/
3737
function ExifMap(tagCode) {
3838
if (tagCode) {
3939
Object.defineProperty(this, 'map', {
40-
value: this.privateIFDs[tagCode].map
40+
value: this.ifds[tagCode].map
4141
})
4242
Object.defineProperty(this, 'tags', {
4343
value: (this.tags && this.tags[tagCode]) || {}
@@ -47,13 +47,15 @@
4747

4848
ExifMap.prototype.map = {
4949
Orientation: 0x0112,
50-
Thumbnail: 0x0201,
50+
Thumbnail: 'ifd1',
51+
Blob: 0x0201, // Alias for JPEGInterchangeFormat
5152
Exif: 0x8769,
5253
GPSInfo: 0x8825,
5354
Interoperability: 0xa005
5455
}
5556

56-
ExifMap.prototype.privateIFDs = {
57+
ExifMap.prototype.ifds = {
58+
ifd1: { name: 'Thumbnail', map: ExifMap.prototype.map },
5759
0x8769: { name: 'Exif', map: {} },
5860
0x8825: { name: 'GPSInfo', map: {} },
5961
0xa005: { name: 'Interoperability', map: {} }
@@ -219,6 +221,21 @@
219221
return values
220222
}
221223

224+
/**
225+
* Determines if the given tag should be included.
226+
*
227+
* @param {object} includeTags Map of tags to include
228+
* @param {object} excludeTags Map of tags to exclude
229+
* @param {number|string} tagCode Tag code to check
230+
* @returns {boolean} True if the tag should be included
231+
*/
232+
function shouldIncludeTag(includeTags, excludeTags, tagCode) {
233+
return (
234+
(!includeTags || includeTags[tagCode]) &&
235+
(!excludeTags || excludeTags[tagCode] !== true)
236+
)
237+
}
238+
222239
/**
223240
* Parses Exif tags.
224241
*
@@ -256,8 +273,7 @@
256273
for (i = 0; i < tagsNumber; i += 1) {
257274
tagOffset = dirOffset + 2 + 12 * i
258275
tagNumber = dataView.getUint16(tagOffset, littleEndian)
259-
if (includeTags && !includeTags[tagNumber]) continue
260-
if (excludeTags && excludeTags[tagNumber] === true) continue
276+
if (!shouldIncludeTag(includeTags, excludeTags, tagNumber)) continue
261277
tagValue = getExifValue(
262278
dataView,
263279
tiffOffset,
@@ -276,17 +292,17 @@
276292
}
277293

278294
/**
279-
* Parses Private IFD tags.
295+
* Parses tags in a given IFD (Image File Directory).
280296
*
281297
* @param {object} data Data object to store exif tags and offsets
282-
* @param {number} tagCode Private IFD tag code
298+
* @param {number|string} tagCode IFD tag code
283299
* @param {DataView} dataView Data view interface
284300
* @param {number} tiffOffset TIFF offset
285301
* @param {boolean} littleEndian Little endian encoding
286302
* @param {object} includeTags Map of tags to include
287303
* @param {object} excludeTags Map of tags to exclude
288304
*/
289-
function parseExifPrivateIFD(
305+
function parseExifIFD(
290306
data,
291307
tagCode,
292308
dataView,
@@ -328,7 +344,7 @@
328344
var tiffOffset = offset + 10
329345
var littleEndian
330346
var dirOffset
331-
var privateIFDs
347+
var thumbnailIFD
332348
// Check for the ASCII code for "Exif" (0x45786966):
333349
if (dataView.getUint32(offset + 4) !== 0x45786966) {
334350
// No Exif data, might be XMP data instead
@@ -369,8 +385,8 @@
369385
data.exifTiffOffset = tiffOffset
370386
data.exifLittleEndian = littleEndian
371387
}
372-
// Parse the tags of the main image directory and retrieve the
373-
// offset to the next directory, usually the thumbnail directory:
388+
// Parse the tags of the main image directory (IFD0) and retrieve the
389+
// offset to the next directory (IFD1), usually the thumbnail directory:
374390
dirOffset = parseExifTags(
375391
dataView,
376392
tiffOffset,
@@ -381,29 +397,14 @@
381397
includeTags,
382398
excludeTags
383399
)
384-
if (dirOffset && !options.disableExifThumbnail) {
385-
dirOffset = parseExifTags(
386-
dataView,
387-
tiffOffset,
388-
tiffOffset + dirOffset,
389-
littleEndian,
390-
data.exif,
391-
data.exifOffsets,
392-
includeTags,
393-
excludeTags
394-
)
395-
// Check for JPEG Thumbnail offset:
396-
if (data.exif[0x0201] && data.exif[0x0202]) {
397-
data.exif[0x0201] = getExifThumbnail(
398-
dataView,
399-
tiffOffset + data.exif[0x0201],
400-
data.exif[0x0202] // Thumbnail data length
401-
)
400+
if (dirOffset && shouldIncludeTag(includeTags, excludeTags, 'ifd1')) {
401+
data.exif.ifd1 = dirOffset
402+
if (data.exifOffsets) {
403+
data.exifOffsets.ifd1 = tiffOffset + dirOffset
402404
}
403405
}
404-
privateIFDs = Object.keys(data.exif.privateIFDs)
405-
privateIFDs.forEach(function (tagCode) {
406-
parseExifPrivateIFD(
406+
Object.keys(data.exif.ifds).forEach(function (tagCode) {
407+
parseExifIFD(
407408
data,
408409
tagCode,
409410
dataView,
@@ -413,6 +414,15 @@
413414
excludeTags
414415
)
415416
})
417+
thumbnailIFD = data.exif.ifd1
418+
// Check for JPEG Thumbnail offset and data length:
419+
if (thumbnailIFD && thumbnailIFD[0x0201] && thumbnailIFD[0x0202]) {
420+
thumbnailIFD[0x0201] = getExifThumbnail(
421+
dataView,
422+
tiffOffset + thumbnailIFD[0x0201],
423+
thumbnailIFD[0x0202] // Thumbnail data length
424+
)
425+
}
416426
}
417427

418428
// Registers the Exif parser for the APP1 JPEG meta data segment:
@@ -441,7 +451,6 @@
441451

442452
// Adds the following options to the parseMetaData method:
443453
// - disableExif: Disables Exif parsing when true.
444-
// - disableExifThumbnail: Disables parsing of Thumbnail data when true.
445454
// - disableExifOffsets: Disables storing Exif tag offsets when true.
446455
// - includeExifTags: A map of Exif tags to include for parsing.
447456
// - excludeExifTags: A map of Exif tags to exclude from parsing.

0 commit comments

Comments
 (0)