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
|
import ExifReader from 'exifreader'
export const MAX_SIDE = 256
function base64ToUint8Array(string, start, finish) {
start = start || 0
finish = finish || string.length
// atob that shit
const binary = atob(string)
const buffer = new Uint8Array(binary.length)
for (let i = start; i < finish; i++) {
buffer[i] = binary.charCodeAt(i)
}
return buffer
}
function getOrientation(uri) {
// Split off the base64 data
const base64String = uri.split(',')[1]
// Read off first 128KB, which is all we need to
// get the EXIF data
const arr = base64ToUint8Array(base64String, 0, 2 ** 17)
try {
const tags = ExifReader.load(arr.buffer)
// console.log(tags)
return tags.Orientation
} catch (err) {
return 1
}
}
function applyRotation(canvas, ctx, deg) {
const radians = deg * (Math.PI / 180)
if (deg === 90) {
ctx.translate(canvas.width, 0)
} else if (deg === 180) {
ctx.translate(canvas.width, canvas.height)
} else if (deg === 270) {
ctx.translate(0, canvas.height)
}
ctx.rotate(radians)
}
/**
* Mapping from EXIF orientation values to data
* regarding the rotation and mirroring necessary to
* render the canvas correctly
* Derived from:
* http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/
*/
const orientationToTransform = {
1: { rotation: 0, mirror: false },
2: { rotation: 0, mirror: true },
3: { rotation: 180, mirror: false },
4: { rotation: 180, mirror: true },
5: { rotation: 90, mirror: true },
6: { rotation: 90, mirror: false },
7: { rotation: 270, mirror: true },
8: { rotation: 270, mirror: false }
}
function applyOrientationCorrection(canvas, ctx, uri) {
const orientation = getOrientation(uri)
// Only apply transform if there is some non-normal orientation
if (orientation && orientation !== 1) {
const transform = orientationToTransform[orientation]
const { rotation } = transform
const flipAspect = rotation === 90 || rotation === 270
if (flipAspect) {
// Fancy schmancy swap algo
canvas.width = canvas.height + canvas.width
canvas.height = canvas.width - canvas.height
canvas.width -= canvas.height
}
if (rotation > 0) {
applyRotation(canvas, ctx, rotation)
}
}
}
function getScale(width, height, viewportWidth, viewportHeight, fillViewport) {
function fitHorizontal() {
return viewportWidth / width
}
function fitVertical() {
return viewportHeight / height
}
fillViewport = !!fillViewport
const landscape = (width / height) > (viewportWidth / viewportHeight)
if (landscape) {
if (fillViewport) {
return fitVertical()
}
if (width > viewportWidth) {
return fitHorizontal()
}
} else {
if (fillViewport) {
return fitHorizontal()
}
if (height > viewportHeight) {
return fitVertical()
}
}
return 1
}
export function renderToCanvas(img, options) {
if (!img) return null
options = options || {}
// Canvas max size for any side
const maxSide = MAX_SIDE
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const initialScale = options.scale || 1
// Scale to needed to constrain canvas to max size
let scale = getScale(img.naturalWidth * initialScale, img.naturalHeight * initialScale, maxSide, maxSide, true)
// console.log(scale)
// Still need to apply the user defined scale
scale *= initialScale
canvas.width = Math.round(img.naturalWidth * scale)
canvas.height = Math.round(img.naturalHeight * scale)
const { correctOrientation } = options
const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i)
const hasDataURI = !!img.src.match(/^data:/)
ctx.save()
// Can only correct orientation on JPEGs represented as dataURIs
// for the time being
if (correctOrientation && jpeg && hasDataURI) {
applyOrientationCorrection(canvas, ctx, img.src)
}
// Resize image if too large
if (scale !== 1) {
ctx.scale(scale, scale)
}
ctx.drawImage(img, 0, 0)
ctx.restore()
return canvas
}
export function renderThumbnail(img) {
const resized = renderToCanvas(img, { correctOrientation: true })
// const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
// const ctx = canvas.getContext('2d')
// ctx.fillStyle = 'black'
// ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE)
// const xOffset = (MAX_SIDE - resized.width) / 2
// const yOffset = (MAX_SIDE - resized.height) / 2
// ctx.drawImage(resized, xOffset, yOffset, resized.width, resized.height)
return resized
}
|
