strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Recalculate blur data when aspect ratio changes

Browse Source
This commit is contained in:
Sam Becker 2023-12-03 21:06:09 -06:00
parent 7cb21a3816
commit d3ce8f2e91
2 changed files with 31 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/CanvasBlurCapture.tsx
View File

@ -24,12 +24,10 @@ export default function CanvasBlurCapture({
quality?: number quality?: number
}) { }) {
const refCanvas = useRef<HTMLCanvasElement>(null); const refCanvas = useRef<HTMLCanvasElement>(null);
const refHasCompleted = useRef(false);
const refTimeouts = useRef<NodeJS.Timeout[]>([]); const refTimeouts = useRef<NodeJS.Timeout[]>([]);
useEffect(() => { useEffect(() => {
const capture = () => { const capture = () => {
if (!refHasCompleted.current) {
const canvas = refCanvas.current; const canvas = refCanvas.current;
if (canvas) { if (canvas) {
canvas.width = width * scale; canvas.width = width * scale;
@ -49,7 +47,7 @@ export default function CanvasBlurCapture({
width + edgeCompensation * 2, width + edgeCompensation * 2,
width * image.height / image.width + edgeCompensation * 2, width * image.height / image.width + edgeCompensation * 2,
); );
refHasCompleted.current = true; refTimeouts.current.forEach(clearTimeout);
onCapture(canvas.toDataURL('image/jpeg', quality)); onCapture(canvas.toDataURL('image/jpeg', quality));
} else { } else {
console.error('Cannot get 2d context'); console.error('Cannot get 2d context');
@ -61,7 +59,6 @@ export default function CanvasBlurCapture({
// Retry capture in case canvas is not available // Retry capture in case canvas is not available
refTimeouts.current.push(setTimeout(capture, RETRY_DELAY)); refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
} }
}
}; };
const image = new Image(); const image = new Image();

4
src/photo/PhotoForm.tsx
View File

@ -91,13 +91,11 @@ export default function PhotoForm({
const url = formData.url ?? ''; const url = formData.url ?? '';
const updateBlurData = useCallback((blurData: string) => { const updateBlurData = useCallback((blurData: string) => {
if (type === 'create') {
setFormData(data => ({ setFormData(data => ({
...data, ...data,
blurData, blurData,
})); }));
} }, []);
}, [type]);
const isFormValid = FORM_METADATA_ENTRIES.every(([key, { required }]) => const isFormValid = FORM_METADATA_ENTRIES.every(([key, { required }]) =>
!required || Boolean(formData[key])); !required || Boolean(formData[key]));