Handle member photo Exif data orientation in the UI

webclient/package.json

@@ -6,6 +6,7 @@
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^9.3.2",
 		"@testing-library/user-event": "^7.1.2",
+		"blueimp-load-image": "^5.13.0",
 		"darkmode-js": "~1.5.5",
 		"moment": "~2.24.0",
 		"moment-timezone": "~0.5.28",

webclient/src/Account.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import * as loadImage from 'blueimp-load-image';
 import ReactCrop from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
 import './light.css';
@@ -116,16 +117,35 @@ function ChangePasswordForm(props) {
 export function ImageCrop(props) {
 	const { file, crop, setCrop } = props;
 	const [src, setSrc] = useState(false);
-	const reader = new FileReader();
+
-	reader.onload = (e) => setSrc(e.target.result);
+	useEffect(() => {
-	reader.readAsDataURL(file);
+		setSrc(false);
+		setCrop({ unit: '%', height: 100, aspect: 3/4 });
+		loadImage(
+			file,
+			img => {
+				setSrc(img.toDataURL());
+			},
+			{
+				meta: true,
+				orientation: true,
+				canvas: true,
+				maxWidth: 300,
+				maxHeight: 300,
+			}
+		);
+	}, [file]);
+
 	return (
-		src && <ReactCrop
+		src ?
-			src={src}
+			<ReactCrop
-			crop={crop}
+				src={src}
-			locked
+				crop={crop}
-			onChange={(crop, percentCrop) => setCrop(percentCrop)}
+				locked
-		/>
+				onChange={(crop, percentCrop) => setCrop(percentCrop)}
+			/>
+		:
+			<p>Loading...</p>
 	);
 }
 
@@ -135,7 +155,7 @@ export function AccountForm(props) {
 	const [input, setInput] = useState({ ...member, set_details: true });
 	const [error, setError] = useState({});
 	const [loading, setLoading] = useState(false);
-	const [crop, setCrop] = useState({ unit: '%', height: 100, aspect: 3/4 });
+	const [crop, setCrop] = useState(false);
 	const history = useHistory();
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
@@ -245,7 +265,11 @@ export function AccountForm(props) {
 			{input.photo &&
 				<>
 					<ImageCrop file={input.photo} crop={crop} setCrop={setCrop} />
-					<p>Move the box above to crop your image.</p>
+					{crop && crop.width === crop.height ?
+						<p>It's the perfect size!</p>
+					:
+						<p>Move the box above to crop your image.</p>
+					}
 				</>
 			}
 

webclient/yarn.lock

@@ -2452,6 +2452,11 @@ bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+blueimp-load-image@^5.13.0:
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/blueimp-load-image/-/blueimp-load-image-5.13.0.tgz#685d302a5adaf99d980fadf3d94f70a8e6ab7d30"
+  integrity sha512-CMmLihVqW0AtRGObKIRxYaVUj+2hw2MkeNHoD2JuobpKZFnCCUVCBIeyYkh8xiq3DHIfHfvsp9l0VpM30k3EXQ==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"