Skip to content

Commit 7e3304b

Browse files
blueimpblueimp
committed
Add auto-orient option via options.orientation === true.
1 parent 6b8a8a5 commit 7e3304b

File tree

6 files changed

+115
-81
lines changed

6 files changed

+115
-81
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,10 @@ <h2>Exif meta data</h2>
5757
</div>
5858
<br>
5959
<script src="js/load-image.js"></script>
60-
<script src="js/load-image-orientation.js"></script>
6160
<script src="js/load-image-meta.js"></script>
6261
<script src="js/load-image-exif.js"></script>
6362
<script src="js/load-image-exif-map.js"></script>
63+
<script src="js/load-image-orientation.js"></script>
6464
<!-- jQuery and Jcrop are not required by JavaScript Load Image, but included for the demo -->
6565
<script src="js/vendor/jquery.js"></script>
6666
<script src="js/vendor/jquery.Jcrop.js"></script>

‎js/demo.js‎

Lines changed: 86 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -20,32 +20,7 @@ $(function () {
2020
var actionsNode = $('#actions')
2121
var currentFile
2222
var coordinates
23-
function replaceResults (img) {
24-
var content
25-
if (!(img.src || img instanceof HTMLCanvasElement)) {
26-
content = $('<span>Loading image file failed</span>')
27-
} else {
28-
content = $('<a target="_blank">').append(img)
29-
.attr('download', currentFile.name)
30-
.attr('href', img.src || img.toDataURL())
31-
}
32-
result.children().replaceWith(content)
33-
if (img.getContext) {
34-
actionsNode.show()
35-
}
36-
}
37-
function displayImage (file, options) {
38-
currentFile = file
39-
if (!loadImage(
40-
file,
41-
replaceResults,
42-
options
43-
)) {
44-
result.children().replaceWith(
45-
$('<span>Your browser does not support the URL or FileReader API.</span>')
46-
)
47-
}
48-
}
23+
4924
function displayExifData (exif) {
5025
var thumbnail = exif.get('Thumbnail')
5126
var tags = exif.getAll()
@@ -70,6 +45,40 @@ $(function () {
7045
}
7146
exifNode.show()
7247
}
48+
49+
function updateResults (img, data) {
50+
var content
51+
if (!(img.src || img instanceof HTMLCanvasElement)) {
52+
content = $('<span>Loading image file failed</span>')
53+
} else {
54+
content = $('<a target="_blank">').append(img)
55+
.attr('download', currentFile.name)
56+
.attr('href', img.src || img.toDataURL())
57+
}
58+
result.children().replaceWith(content)
59+
if (img.getContext) {
60+
actionsNode.show()
61+
}
62+
if (data && data.exif) {
63+
displayExifData(data.exif)
64+
}
65+
}
66+
67+
function displayImage (file, options) {
68+
currentFile = file
69+
if (!loadImage(
70+
file,
71+
updateResults,
72+
options
73+
)) {
74+
result.children().replaceWith(
75+
$('<span>' +
76+
'Your browser does not support the URL or FileReader API.' +
77+
'</span>')
78+
)
79+
}
80+
}
81+
7382
function dropChangeHandler (e) {
7483
e.preventDefault()
7584
e = e.originalEvent
@@ -79,71 +88,75 @@ $(function () {
7988
maxWidth: result.width(),
8089
canvas: true,
8190
pixelRatio: window.devicePixelRatio,
82-
downsamplingRatio: 0.5
91+
downsamplingRatio: 0.5,
92+
orientation: true
8393
}
8494
if (!file) {
8595
return
8696
}
8797
exifNode.hide()
8898
thumbNode.hide()
89-
loadImage.parseMetaData(file, function (data) {
90-
if (data.exif) {
91-
options.orientation = data.exif.get('Orientation')
92-
displayExifData(data.exif)
93-
}
94-
displayImage(file, options)
95-
})
99+
displayImage(file, options)
96100
}
101+
97102
// Hide URL/FileReader API requirement message in capable browsers:
98-
if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) {
103+
if (window.createObjectURL || window.URL || window.webkitURL ||
104+
window.FileReader) {
99105
result.children().hide()
100106
}
107+
101108
$(document)
102109
.on('dragover', function (e) {
103110
e.preventDefault()
104111
e = e.originalEvent
105112
e.dataTransfer.dropEffect = 'copy'
106113
})
107114
.on('drop', dropChangeHandler)
108-
$('#file-input').on('change', dropChangeHandler)
109-
$('#edit').on('click', function (event) {
110-
event.preventDefault()
111-
var imgNode = result.find('img, canvas')
112-
var img = imgNode[0]
113-
var pixelRatio = window.devicePixelRatio || 1
114-
imgNode.Jcrop({
115-
setSelect: [
116-
40,
117-
40,
118-
(img.width / pixelRatio) - 40,
119-
(img.height / pixelRatio) - 40
120-
],
121-
onSelect: function (coords) {
122-
coordinates = coords
123-
},
124-
onRelease: function () {
115+
116+
$('#file-input')
117+
.on('change', dropChangeHandler)
118+
119+
$('#edit')
120+
.on('click', function (event) {
121+
event.preventDefault()
122+
var imgNode = result.find('img, canvas')
123+
var img = imgNode[0]
124+
var pixelRatio = window.devicePixelRatio || 1
125+
imgNode.Jcrop({
126+
setSelect: [
127+
40,
128+
40,
129+
(img.width / pixelRatio) - 40,
130+
(img.height / pixelRatio) - 40
131+
],
132+
onSelect: function (coords) {
133+
coordinates = coords
134+
},
135+
onRelease: function () {
136+
coordinates = null
137+
}
138+
}).parent().on('click', function (event) {
139+
event.preventDefault()
140+
})
141+
})
142+
143+
$('#crop')
144+
.on('click', function (event) {
145+
event.preventDefault()
146+
var img = result.find('img, canvas')[0]
147+
var pixelRatio = window.devicePixelRatio || 1
148+
if (img && coordinates) {
149+
updateResults(loadImage.scale(img, {
150+
left: coordinates.x * pixelRatio,
151+
top: coordinates.y * pixelRatio,
152+
sourceWidth: coordinates.w * pixelRatio,
153+
sourceHeight: coordinates.h * pixelRatio,
154+
minWidth: result.width(),
155+
maxWidth: result.width(),
156+
pixelRatio: pixelRatio,
157+
downsamplingRatio: 0.5
158+
}))
125159
coordinates = null
126160
}
127-
}).parent().on('click', function (event) {
128-
event.preventDefault()
129161
})
130-
})
131-
$('#crop').on('click', function (event) {
132-
event.preventDefault()
133-
var img = result.find('img, canvas')[0]
134-
var pixelRatio = window.devicePixelRatio || 1
135-
if (img && coordinates) {
136-
replaceResults(loadImage.scale(img, {
137-
left: coordinates.x * pixelRatio,
138-
top: coordinates.y * pixelRatio,
139-
sourceWidth: coordinates.w * pixelRatio,
140-
sourceHeight: coordinates.h * pixelRatio,
141-
minWidth: result.width(),
142-
maxWidth: result.width(),
143-
pixelRatio: pixelRatio,
144-
downsamplingRatio: 0.5
145-
}))
146-
coordinates = null
147-
}
148-
})
149162
})

‎js/load-image-orientation.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,22 @@
2626
'use strict'
2727

2828
var originalHasCanvasOption = loadImage.hasCanvasOption
29+
var originalHasMetaOption = loadImage.hasMetaOption
2930
var originalTransformCoordinates = loadImage.transformCoordinates
3031
var originalGetTransformedOptions = loadImage.getTransformedOptions
3132

32-
// This method is used to determine if the target image
33-
// should be a canvas element:
33+
// Determines if the target image should be a canvas element:
3434
loadImage.hasCanvasOption = function (options) {
3535
return !!options.orientation ||
3636
originalHasCanvasOption.call(loadImage, options)
3737
}
3838

39+
// Determines if meta data should be loaded automatically:
40+
loadImage.hasMetaOption = function (options) {
41+
return options.orientation === true ||
42+
originalHasMetaOption.call(loadImage, options)
43+
}
44+
3945
// Transform image orientation based on
4046
// the given EXIF orientation option:
4147
loadImage.transformCoordinates = function (canvas, options) {
@@ -97,11 +103,14 @@
97103

98104
// Transforms coordinate and dimension options
99105
// based on the given orientation option:
100-
loadImage.getTransformedOptions = function (img, opts) {
106+
loadImage.getTransformedOptions = function (img, opts, data) {
101107
var options = originalGetTransformedOptions.call(loadImage, img, opts)
102108
var orientation = options.orientation
103109
var newOptions
104110
var i
111+
if (orientation === true && data && data.exif) {
112+
orientation = data.exif.get('Orientation')
113+
}
105114
if (!orientation || orientation > 8 || orientation === 1) {
106115
return options
107116
}
@@ -111,7 +120,8 @@
111120
newOptions[i] = options[i]
112121
}
113122
}
114-
switch (options.orientation) {
123+
newOptions.orientation = orientation
124+
switch (orientation) {
115125
case 2:
116126
// horizontal flip
117127
newOptions.left = options.right

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"lint": "standard *.js js/*.js test/*.js",
4141
"unit": "phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html",
4242
"test": "npm run lint && npm run unit",
43-
"build": "cd js && uglifyjs load-image.js load-image-orientation.js load-image-meta.js load-image-exif.js load-image-exif-map.js -c -m -o load-image.all.min.js --source-map load-image.all.min.js.map",
43+
"build": "cd js && uglifyjs load-image.js load-image-meta.js load-image-exif.js load-image-exif-map.js load-image-orientation.js -c -m -o load-image.all.min.js --source-map load-image.all.min.js.map",
4444
"preversion": "npm test",
4545
"version": "npm run build && git add -A js",
4646
"postversion": "git push --tags origin master master:gh-pages && npm publish"

‎test/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@
3131
</script>
3232
<script src="vendor/canvas-to-blob.js"></script>
3333
<script src="../js/load-image.js"></script>
34-
<script src="../js/load-image-orientation.js"></script>
3534
<script src="../js/load-image-meta.js"></script>
3635
<script src="../js/load-image-exif.js"></script>
3736
<script src="../js/load-image-exif-map.js"></script>
37+
<script src="../js/load-image-orientation.js"></script>
3838
<script src="test.js"></script>
3939
<script>
4040
mocha.checkLeaks();

‎test/test.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7'
2222
var imageUrlGIF = 'data:image/gif;base64,' + b64DataGIF
2323
var blobGIF = canCreateBlob && window.dataURLtoBlob(imageUrlGIF)
24-
// 1x2px JPEG (color white, with the Exif orientation flag set to 6):
24+
// 2x1px JPEG (color white, with the Exif orientation flag set to 6):
2525
var b64DataJPEG = '/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAASUkqAAgAAA' +
2626
'ABABIBAwABAAAABgASAAAAAAD/2wBDAAEBAQEBAQEBAQEBAQEB' +
2727
'AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ' +
@@ -438,6 +438,17 @@
438438
done()
439439
}, {orientation: 9})).to.be.ok()
440440
})
441+
442+
it('Should rotate right based on the exif orientation value', function (done) {
443+
expect(loadImage(blobJPEG, function (img, data) {
444+
expect(data).to.be.ok()
445+
expect(data.exif).to.be.ok()
446+
expect(data.exif.get('Orientation')).to.be(6)
447+
expect(img.width).to.be(1)
448+
expect(img.height).to.be(2)
449+
done()
450+
}, {orientation: true})).to.be.ok()
451+
})
441452
})
442453

443454
describe('Canvas', function () {

0 commit comments

Comments
 (0)