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

Delay generating blur data to avoid race condition

Browse Source
This commit is contained in:
Sam Becker 2023-09-19 18:04:47 -05:00
parent 4d30f476fd
commit bab7477e7d
1 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/photo/PhotoForm.tsx
View File

@ -41,34 +41,39 @@ export default function PhotoForm({
image.crossOrigin = 'anonymous'; image.crossOrigin = 'anonymous';
image.src = url; image.src = url;
image.onload = () => { image.onload = () => {
const canvas = canvasRef.current; const timeout = setTimeout(() => {
if (canvas) { const canvas = canvasRef.current;
canvas.width = THUMBNAIL_WIDTH * BLUR_SCALE; if (canvas) {
canvas.height = THUMBNAIL_HEIGHT * BLUR_SCALE; canvas.width = THUMBNAIL_WIDTH * BLUR_SCALE;
canvas.style.width = `${THUMBNAIL_WIDTH}px`; canvas.height = THUMBNAIL_HEIGHT * BLUR_SCALE;
canvas.style.height = `${THUMBNAIL_HEIGHT}px`; canvas.style.width = `${THUMBNAIL_WIDTH}px`;
const context = canvasRef.current?.getContext('2d'); canvas.style.height = `${THUMBNAIL_HEIGHT}px`;
if (context) { const context = canvasRef.current?.getContext('2d');
context.scale(BLUR_SCALE, BLUR_SCALE); if (context) {
context.filter = context.scale(BLUR_SCALE, BLUR_SCALE);
'contrast(1.2) saturate(1.2)' + context.filter =
`blur(${BLUR_SCALE * 10}px)`; 'contrast(1.2) saturate(1.2)' +
context.drawImage( `blur(${BLUR_SCALE * 10}px)`;
image, context.drawImage(
-EDGE_BLUR_COMPENSATION, image,
-EDGE_BLUR_COMPENSATION, -EDGE_BLUR_COMPENSATION,
THUMBNAIL_WIDTH + EDGE_BLUR_COMPENSATION * 2, -EDGE_BLUR_COMPENSATION,
THUMBNAIL_WIDTH * image.height / image.width THUMBNAIL_WIDTH + EDGE_BLUR_COMPENSATION * 2,
+ EDGE_BLUR_COMPENSATION * 2, THUMBNAIL_WIDTH * image.height / image.width
); + EDGE_BLUR_COMPENSATION * 2,
if (type === 'create') { );
setFormData(data => ({ if (type === 'create') {
...data, setFormData(data => ({
blurData: canvas.toDataURL('image/jpeg', BLUE_JPEG_QUALITY), ...data,
})); blurData: canvas.toDataURL('image/jpeg', BLUE_JPEG_QUALITY),
}));
}
} }
} else {
console.error('Cannot generate blur data: canvas not found');
} }
} }, 1000);
return () => clearTimeout(timeout);
}; };
}, [url, type]); }, [url, type]);