Skip to content

Commit 094e556

Browse files
blueimpblueimp
committed
Add Exif writer with Orientation tag override.
Resolves blueimp#96
1 parent f964d09 commit 094e556

7 files changed

Lines changed: 126 additions & 47 deletions

File tree

‎README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
- [Meta data parsing](#meta-data-parsing)
4040
- [Image head](#image-head)
4141
- [Exif parser](#exif-parser)
42+
- [Exif writer](#exif-writer)
4243
- [IPTC parser](#iptc-parser)
4344
- [License](#license)
4445
- [Credits](#credits)
@@ -471,6 +472,29 @@ disable certain aspects of the parser:
471472
- `disableExifGps`: Disables parsing of the Exif GPS Info IFD.
472473
- `disableExifOffsets`: Disables storing Exif tag offsets
473474

475+
### Exif writer
476+
477+
The Exif parser extension also includes a minimal writer that allows to override
478+
the Exif `Orientation` value in the parsed `imageHead` `ArrayBuffer`:
479+
480+
```js
481+
loadImage(
482+
fileOrBlobOrUrl,
483+
function (img, data) {
484+
if (data.imageHead && data.exif) {
485+
// Reset Exif Orientation data:
486+
loadImage.writeExifData(data.imageHead, data, 'Orientation', 1)
487+
img.toBlob(function (blob) {
488+
loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
489+
// do something with newBlob
490+
})
491+
}, 'image/jpeg')
492+
}
493+
},
494+
{ meta: true, orientation: true, canvas: true, maxWidth: 800 }
495+
)
496+
```
497+
474498
### IPTC parser
475499

476500
If you include the Load Image IPTC Parser extension, the argument passed to the

‎index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ <h2>Select an image file</h2>
8181
</p>
8282
<p>Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
8383
<h2>Result</h2>
84-
<p id="actions" style="display:none;">
84+
<p id="actions" style="display: none;">
8585
<button type="button" id="edit">Edit</button>
8686
<button type="button" id="crop">Crop</button>
8787
<button type="button" id="cancel">Cancel</button>
@@ -94,15 +94,17 @@ <h2>Result</h2>
9494
API.
9595
</p>
9696
</div>
97-
<div id="exif" style="display:none;">
97+
<div id="exif" style="display: none;">
9898
<h3>Exif meta data</h3>
99-
<p id="thumbnail" style="display:none;"></p>
99+
<p id="thumbnail" style="display: none;"></p>
100100
<table></table>
101101
</div>
102-
<div id="iptc" style="display:none;">
102+
<div id="iptc" style="display: none;">
103103
<h3>IPTC meta data</h3>
104104
<table></table>
105105
</div>
106+
107+
<script src="js/vendor/canvas-to-blob.js"></script>
106108
<script src="js/load-image.js"></script>
107109
<script src="js/load-image-scale.js"></script>
108110
<script src="js/load-image-meta.js"></script>

‎js/demo/demo.js‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ $(function () {
1919
var iptcNode = $('#iptc')
2020
var thumbNode = $('#thumbnail')
2121
var actionsNode = $('#actions')
22-
var currentFile
2322
var coordinates
2423
var jcropAPI
2524

@@ -94,31 +93,33 @@ $(function () {
9493
* @param {object} [data] Meta data object
9594
*/
9695
function updateResults(img, data) {
97-
var fileName = currentFile.name
98-
var href = currentFile.url || img.src
99-
var dataURLStart
100-
var content
10196
if (!(img.src || img instanceof HTMLCanvasElement)) {
102-
content = $('<span>Loading image file failed</span>')
103-
} else {
104-
if (!href) {
105-
href = img.toDataURL(currentFile.type)
106-
// Check if file type is supported for the dataURL export:
107-
dataURLStart = 'data:' + currentFile.type
108-
if (href.slice(0, dataURLStart.length) !== dataURLStart) {
109-
fileName = fileName.replace(/\.\w+$/, '.png')
110-
}
111-
}
112-
content = $('<a target="_blank">')
113-
.append(img)
114-
.attr('download', fileName)
115-
.attr('href', href)
97+
result.children().replaceWith($('<span>Loading image file failed</span>'))
98+
return
11699
}
100+
var content = $('<a>').append(img)
117101
result.children().replaceWith(content)
118-
if (img.getContext) {
119-
actionsNode.show()
102+
if (data) {
103+
if (img.getContext) {
104+
actionsNode.show()
105+
}
106+
displayMetaData(data)
107+
result.data(data)
108+
} else {
109+
// eslint-disable-next-line no-param-reassign
110+
data = result.data()
111+
}
112+
if (data.imageHead && data.exif) {
113+
// Reset Exif Orientation data:
114+
loadImage.writeExifData(data.imageHead, data, 'Orientation', 1)
115+
img.toBlob(function (blob) {
116+
loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
117+
content
118+
.attr('href', loadImage.createObjectURL(newBlob))
119+
.attr('download', 'image.jpg')
120+
})
121+
}, 'image/jpeg')
120122
}
121-
displayMetaData(data)
122123
}
123124

124125
/**
@@ -164,7 +165,6 @@ $(function () {
164165
if (!file) {
165166
return
166167
}
167-
currentFile = file
168168
displayImage(file)
169169
}
170170

@@ -173,12 +173,7 @@ $(function () {
173173
*/
174174
function urlChangeHandler() {
175175
var url = $(this).val()
176-
if (!url || (currentFile && currentFile.url === url)) return
177-
currentFile = {
178-
name: url.replace(/^.*\//g, ''),
179-
url: url
180-
}
181-
displayImage(url)
176+
if (url) displayImage(url)
182177
}
183178

184179
// Hide URL/FileReader API requirement message in capable browsers:

‎js/load-image-exif.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* https://opensource.org/licenses/MIT
1010
*/
1111

12-
/* global define, module, require */
12+
/* global define, module, require, DataView */
1313

1414
/* eslint-disable no-console */
1515

@@ -322,6 +322,19 @@
322322
// Registers the Exif parser for the APP1 JPEG meta data segment:
323323
loadImage.metaDataParsers.jpeg[0xffe1].push(loadImage.parseExifData)
324324

325+
loadImage.exifWriters = {
326+
// Orientation writer:
327+
0x0112: function (buffer, data, value) {
328+
var view = new DataView(buffer, data.exifOffsets[0x0112] + 8, 2)
329+
view.setUint16(0, value, data.exifLittleEndian)
330+
return buffer
331+
}
332+
}
333+
334+
loadImage.writeExifData = function (buffer, data, id, value) {
335+
loadImage.exifWriters[data.exif.map[id]](buffer, data, value)
336+
}
337+
325338
// Adds the following properties to the parseMetaData callback data:
326339
// * exif: The parsed Exif tags
327340
// * exifOffsets: The parsed Exif tag offsets

test/vendor/canvas-to-blob.js renamed to js/vendor/canvas-to-blob.js

File renamed without changes.

‎test/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,9 @@
2626
<script src="vendor/mocha.js"></script>
2727
<script src="vendor/chai.js"></script>
2828
<script>
29-
window.initMochaPhantomJS && initMochaPhantomJS()
3029
mocha.setup('bdd')
3130
</script>
32-
<script src="vendor/canvas-to-blob.js"></script>
31+
<script src="../js/vendor/canvas-to-blob.js"></script>
3332
<script src="../js/load-image.js"></script>
3433
<script src="../js/load-image-scale.js"></script>
3534
<script src="../js/load-image-meta.js"></script>

‎test/test.js‎

Lines changed: 57 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,16 @@
106106
).to.be.ok
107107
})
108108

109+
it('Provide original image width+height in callback data', function (done) {
110+
expect(
111+
loadImage(imageUrlGIF, function (img, data) {
112+
expect(data.originalWidth).to.equal(60)
113+
expect(data.originalHeight).to.equal(40)
114+
done()
115+
})
116+
).to.be.ok
117+
})
118+
109119
it('Keep object URL if noRevoke is true', function (done) {
110120
expect(
111121
loadImage(
@@ -133,16 +143,6 @@
133143
})
134144
).to.be.ok
135145
})
136-
137-
it('Provide original image width+height in callback data', function (done) {
138-
expect(
139-
loadImage(imageUrlGIF, function (img, data) {
140-
expect(data.originalWidth).to.equal(60)
141-
expect(data.originalHeight).to.equal(40)
142-
done()
143-
})
144-
).to.be.ok
145-
})
146146
})
147147

148148
describe('Scaling', function () {
@@ -989,6 +989,16 @@
989989
})
990990
})
991991

992+
it('Should parse Exif tag offsets', function (done) {
993+
loadImage.parseMetaData(blobJPEG, function (data) {
994+
expect(data.exifOffsets).to.be.ok
995+
expect(data.exifOffsets.get('Orientation')).to.equal(0x16)
996+
expect(data.exifTiffOffset).to.equal(0xc)
997+
expect(data.exifLittleEndian).to.equal(false)
998+
done()
999+
})
1000+
})
1001+
9921002
it('Should parse IPTC tags', function (done) {
9931003
loadImage.parseMetaData(blobJPEG, function (data) {
9941004
expect(data.iptc).to.be.ok
@@ -1028,6 +1038,40 @@
10281038
)
10291039
).to.be.ok
10301040
})
1041+
1042+
it('Should write Exif Orientation tag and replace image head', function (done) {
1043+
loadImage(
1044+
blobJPEG,
1045+
function (img, data) {
1046+
expect(data.imageHead).to.be.ok
1047+
expect(data.exif).to.be.ok
1048+
expect(data.exif.get('Orientation')).to.equal(6)
1049+
expect(data.iptc).to.be.ok
1050+
expect(data.iptc.get('ObjectName')).to.equal('blueimp.net')
1051+
// Reset Exif Orientation data:
1052+
loadImage.writeExifData(data.imageHead, data, 'Orientation', 1)
1053+
img.toBlob(function (blob) {
1054+
loadImage.replaceHead(blob, data.imageHead, function (newBlob) {
1055+
loadImage(
1056+
newBlob,
1057+
function (img, data) {
1058+
expect(img.width).to.equal(40)
1059+
expect(img.height).to.equal(60)
1060+
expect(data.imageHead).to.be.ok
1061+
expect(data.exif).to.be.ok
1062+
expect(data.exif.get('Orientation')).to.equal(1)
1063+
expect(data.iptc).to.be.ok
1064+
expect(data.iptc.get('ObjectName')).to.equal('blueimp.net')
1065+
done()
1066+
},
1067+
{ meta: true }
1068+
)
1069+
})
1070+
}, 'image/jpeg')
1071+
},
1072+
{ meta: true, orientation: true, canvas: true, minWidth: 40 }
1073+
)
1074+
})
10311075
})
10321076

10331077
describe('Fetch', function () {
@@ -1041,7 +1085,9 @@
10411085
it('Should fetch image URL as blob if meta option is true', function (done) {
10421086
expect(
10431087
loadImage(
1044-
imageUrlJPEG,
1088+
// IE11 does not allow XMLHttpRequest access to data URLs,
1089+
// so we use an ObjectURL instead of imageUrlJPEG directly:
1090+
loadImage.createObjectURL(blobJPEG),
10451091
function (img, data) {
10461092
expect(data).to.be.ok
10471093
expect(data.imageHead).to.be.ok

0 commit comments

Comments
 (0)