exifr/examples/orientation.html at master · MikeKovarik/exifr · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1"/>
	<title>Exifr orientation example</title>
	<link rel="stylesheet" type="text/css" href="../homepage/app.css">
	<style>
		table {
			border-spacing: 8px;
			border-collapse: separate;
		}
		table,
		table tr,
		table td {
			text-align: center;
			vertical-align: middle;
			white-space: pre-wrap;
			margin: 0 !important;
			padding: 0 !important;
		}
		table tr td:first-child {
			min-width: 140px;
			max-width: 160px;
		}
		.name {
			font-size: 14px;
			margin: 2px 0;
			font-weight: 700;
		}
		.subtitle {
			font-size: 11px;
			margin: 2px 0;
			font-style: italic;
			opacity: 0.6;
		}
		.code {
			font-size: 10px;
		}
	</style>
</head>
<body>

	<p><strong>Warning:</strong> Some modern browsers automatically rotate images based on their exif. They're changing default value of the css property <code>image-orientation</code> from <code>'none'</code> to <code>'from-image'</code> on <code>&lt;img&gt;</code> elements and <code>background-image</code>. However they can also pass rotated photo to <code>&lt;canvas&gt;</code> through <code>ctx.drawImage()</code>. Though this behavior is quirky and differs from browser to browser, especially in Safari on iOs 13.4 and newer.</p>
	<p>Use <code>exifr.rotation()</code> if you want to manipulate the image and avoid afore mentioned problems.</p>
	<p>If <code>canvas</code> property is <code>true</code>, you need to rotate the image yourself in <code>&lt;canvas&gt;</code> using <code>ctx.rotate(...)</code>.</p>
	<p>If <code>css</code> property is <code>true</code>, you need to rotate the image yourself with CSS using <code>transform:rotate(...)</code>.</p>

	<table></table>

	<script src="../dist/mini.umd.js"></script>
	<script>

		let table = document.querySelector('table')

		function createElement(name) {
			return document.createElement(name)
		}

		function createRow(name, subtitle, array) {
			let tr = createElement('tr')
			let head = createElement('td')
			head.innerHTML = `<p class="name">${name}</p>`
			if (subtitle) head.innerHTML += `<p class="subtitle">${subtitle}</p>`
			tr.append(head)
			for (let item of array) {
				let td = createElement('td')
				td.append(item)
				tr.append(td)
			}
			table.append(tr)
		}

		function createImg(url) {
			let img = createElement('img')
			img.src = url
			return img
		}

		let urls = [
			'../test/fixtures/orientation/f1t.jpg',
			'../test/fixtures/orientation/f2t.jpg',
			'../test/fixtures/orientation/f3t.jpg',
			'../test/fixtures/orientation/f4t.jpg',
			'../test/fixtures/orientation/f5t.jpg',
			'../test/fixtures/orientation/f6t.jpg',
			'../test/fixtures/orientation/f7t.jpg',
			'../test/fixtures/orientation/f8t.jpg',
		]

		let rawTransforms = [
			{deg: 0, scaleX: 1, scaleY: 1},
			{deg: 0, scaleX: -1, scaleY: 1},
			{deg: 0, scaleX: -1, scaleY: -1},
			{deg: 0, scaleX: 1, scaleY: -1},
			{deg: 90, scaleX: 1, scaleY: -1},
			{deg: 90, scaleX: -1, scaleY: -1},
			{deg: 90, scaleX: -1, scaleY: 1},
			{deg: 90, scaleX: 1, scaleY: 1},
		]


		;(async function() {
			let orientationsPromises = urls.map(exifr.orientation)
			let rotationsPromises    = urls.map(exifr.rotation)
			let orientations = await Promise.all(orientationsPromises)
			let rotations    = await Promise.all(rotationsPromises)
			let images = urls.map(createImg)
			await Promise.all(images.map(img => new Promise(resolve => img.onload = resolve)))
			let raw      = rawTransforms.map(rot => createRaw(urls[0], rot))
			let rotated1 = images.map((img, i) => createRotatedCanvas(img, rotations[i]))
			let rotated2 = urls.map((url, i) => createRotatedImg(url, rotations[i]))
			createRow('orientation', 'standardized EXIF number', orientations)
			createRow('raw image', 'The way it looks in basic photo viewers or old browsers.', raw)
			createRow('unmodified &lt;img&gt;', 'The way browser renders it. May be autorotated in modern browsers.', images)
			createRow('rotated &lt;canvas&gt;', 'Using <code>ctx.rotate()</code> with <code>ctx.drawImage()</code> if <code>rotation.canvas===true</code>', rotated1)
			createRow('rotated with css', 'Using property <code>transform:rotate()</code> if <code>rotation.css===true</code>', rotated2)
			createRow('exifr.rotation()', 'Output of exifr describing if and how rotation should be handled depending on current browser.', rotations.map(rot => {
				rot = JSON.parse(JSON.stringify(rot))
				rot.rad = Number(rot.rad.toFixed(3))
				let json = Object.entries(rot).map(([key, val]) => `${key}: ${val}`).join('\n')
				let div = document.createElement('div')
				div.style.textAlign = 'left'
				div.style.whiteSpace = 'pre-wrap'
				div.style.fontSize = '10px'
				div.innerHTML = json
				return div
			}))
		})();

		function createRaw(url, rot) {
			let img = createImg(url)
			img.style.transform = `rotate(${rot.deg}deg) scale(${rot.scaleX}, ${rot.scaleY})`
			return img
		}

		function createRotatedCanvas(img, rot) {
			let w = img.width
			let h = img.height
			// only swap width and height if the image is rotated 90 or 270 degrees
			// and if the browser doesn't do autorotation already
			if (rot.canvas && rot.dimensionSwapped) {
				w = img.height
				h = img.width
			}
			let canvas = document.createElement('canvas')
			canvas.width = w
			canvas.height = h
			let ctx = canvas.getContext('2d')
			// only rotate the image using canvas if browser doesn't do autorotation already
			if (rot.canvas) {
				ctx.translate(w / 2, h / 2)
				ctx.rotate(rot.rad)
				ctx.scale(rot.scaleX, rot.scaleY)
				ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height)
			} else {
				ctx.drawImage(img, 0, 0)
			}
			return canvas
		}

		function createRotatedImg(url, rot) {
			let img = createImg(url)
			// only rotate the image using css if browser doesn't do autorotation already
			if (rot.css) img.style.transform = `rotate(${rot.deg}deg) scale(${rot.scaleX}, ${rot.scaleY})`
			return img
		}

	</script>

</body>
</html>