Handle member photo Exif data orientation in the UI

This commit is contained in:
Tanner Collin 2020-07-18 06:12:10 +00:00
parent 792a7ed62b
commit 49b2cb48ab
3 changed files with 41 additions and 11 deletions

View File

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

View File

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

View File

@ -2452,6 +2452,11 @@ bluebird@^3.5.5:
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== 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: bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
version "4.11.8" version "4.11.8"
resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f" resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"