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.src = url;
image.onload = () => {
const canvas = canvasRef.current;
if (canvas) {
canvas.width = THUMBNAIL_WIDTH * BLUR_SCALE;
canvas.height = THUMBNAIL_HEIGHT * BLUR_SCALE;
canvas.style.width = `${THUMBNAIL_WIDTH}px`;
canvas.style.height = `${THUMBNAIL_HEIGHT}px`;
const context = canvasRef.current?.getContext('2d');
if (context) {
context.scale(BLUR_SCALE, BLUR_SCALE);
context.filter =
'contrast(1.2) saturate(1.2)' +
`blur(${BLUR_SCALE * 10}px)`;
context.drawImage(
image,
-EDGE_BLUR_COMPENSATION,
-EDGE_BLUR_COMPENSATION,
THUMBNAIL_WIDTH + EDGE_BLUR_COMPENSATION * 2,
THUMBNAIL_WIDTH * image.height / image.width
+ EDGE_BLUR_COMPENSATION * 2,
);
if (type === 'create') {
setFormData(data => ({
...data,
blurData: canvas.toDataURL('image/jpeg', BLUE_JPEG_QUALITY),
}));
const timeout = setTimeout(() => {
const canvas = canvasRef.current;
if (canvas) {
canvas.width = THUMBNAIL_WIDTH * BLUR_SCALE;
canvas.height = THUMBNAIL_HEIGHT * BLUR_SCALE;
canvas.style.width = `${THUMBNAIL_WIDTH}px`;
canvas.style.height = `${THUMBNAIL_HEIGHT}px`;
const context = canvasRef.current?.getContext('2d');
if (context) {
context.scale(BLUR_SCALE, BLUR_SCALE);
context.filter =
'contrast(1.2) saturate(1.2)' +
`blur(${BLUR_SCALE * 10}px)`;
context.drawImage(
image,
-EDGE_BLUR_COMPENSATION,
-EDGE_BLUR_COMPENSATION,
THUMBNAIL_WIDTH + EDGE_BLUR_COMPENSATION * 2,
THUMBNAIL_WIDTH * image.height / image.width
+ EDGE_BLUR_COMPENSATION * 2,
);
if (type === 'create') {
setFormData(data => ({
...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]);