From aa5638a1c31ce56d59696580f33733dcf0d7764c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 28 Apr 2019 15:54:41 +0200 Subject: refactor frontend, add threshold slider --- client/lib/upload.helpers.js | 156 ------------------------------------------- 1 file changed, 156 deletions(-) delete mode 100644 client/lib/upload.helpers.js (limited to 'client/lib/upload.helpers.js') diff --git a/client/lib/upload.helpers.js b/client/lib/upload.helpers.js deleted file mode 100644 index d0baab4..0000000 --- a/client/lib/upload.helpers.js +++ /dev/null @@ -1,156 +0,0 @@ -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 -} -- cgit v1.2.3-70-g09d2