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

Prevent unnecessary blur calculation

Browse Source
This commit is contained in:
Sam Becker 2024-03-01 13:16:31 -06:00
parent 5bd1602498
commit d52e8fdb14
1 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/CanvasBlurCapture.tsx
View File

@ -25,39 +25,43 @@ export default function CanvasBlurCapture({
}) {
const refCanvas = useRef<HTMLCanvasElement>(null);
const refTimeouts = useRef<NodeJS.Timeout[]>([]);
const refShouldCapture = useRef(true);
useEffect(() => {
const capture = () => {
const canvas = refCanvas.current;
if (canvas) {
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const context = refCanvas.current?.getContext('2d');
if (context) {
context.scale(scale, scale);
context.filter =
'contrast(1.2) saturate(1.2)' +
`blur(${scale * 10}px)`;
context.drawImage(
image,
-edgeCompensation,
-edgeCompensation,
width + edgeCompensation * 2,
width * image.height / image.width + edgeCompensation * 2,
);
refTimeouts.current.forEach(clearTimeout);
onCapture(canvas.toDataURL('image/jpeg', quality));
if (refShouldCapture.current) {
const canvas = refCanvas.current;
if (canvas) {
canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const context = refCanvas.current?.getContext('2d');
if (context) {
context.scale(scale, scale);
context.filter =
'contrast(1.2) saturate(1.2)' +
`blur(${scale * 10}px)`;
context.drawImage(
image,
-edgeCompensation,
-edgeCompensation,
width + edgeCompensation * 2,
width * image.height / image.width + edgeCompensation * 2,
);
refTimeouts.current.forEach(clearTimeout);
onCapture(canvas.toDataURL('image/jpeg', quality));
refShouldCapture.current = false;
} else {
console.error('Cannot get 2d context');
// Retry capture in case canvas is not available
refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
}
} else {
console.error('Cannot get 2d context');
console.error('Cannot generate blur data: canvas not found');
// Retry capture in case canvas is not available
refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
}
} else {
console.error('Cannot generate blur data: canvas not found');
// Retry capture in case canvas is not available
refTimeouts.current.push(setTimeout(capture, RETRY_DELAY));
}
};