Update app.py

app.py

@@ -654,29 +654,30 @@ var nw=sw*scale,nh=sh*scale;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
 ctx.drawImage(el,ox,oy,nw,nh);
 }}else if(mode==='blur'){{
-// 먼저 현재 프레임을 임시 캔버스에 캡처
-var tempCanvas=document.createElement('canvas');
-tempCanvas.width=sw;tempCanvas.height=sh;
-var tempCtx=tempCanvas.getContext('2d');
-tempCtx.drawImage(el,0,0,sw,sh);
-
-// 블러 배경: 배경에 확대+블러, 그 위에 원본
-ctx.filter='blur(20px)';
+// 블러 효과: 축소-확대 기법 (filter보다 훨씬 빠름)
+// 1. 아주 작은 캔버스에 그려서 픽셀화
+var blurCanvas=document.createElement('canvas');
+blurCanvas.width=32;blurCanvas.height=32;
+var blurCtx=blurCanvas.getContext('2d');
+blurCtx.drawImage(el,0,0,32,32);
+
+// 2. 작은 이미지를 확대하면 자연스러운 블러 효과
+ctx.imageSmoothingEnabled=true;
+ctx.imageSmoothingQuality='high';
 var scale=Math.max(dw/sw,dh/sh)*1.1;
 var nw=sw*scale,nh=sh*scale;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
-ctx.drawImage(tempCanvas,ox,oy,nw,nh);
-ctx.filter='none';
+ctx.drawImage(blurCanvas,ox,oy,nw,nh);
 
-// 어둡게
-ctx.fillStyle='rgba(0,0,0,0.3)';
+// 3. 어둡게
+ctx.fillStyle='rgba(0,0,0,0.4)';
 ctx.fillRect(0,0,dw,dh);
 
-// 원본 (fit) - 캡처된 프레임 재사용
+// 4. 원본 (fit)
 var fitScale=Math.min(dw/sw,dh/sh);
 var fw=sw*fitScale,fh=sh*fitScale;
 var fx=(dw-fw)/2,fy=(dh-fh)/2;
-ctx.drawImage(tempCanvas,fx,fy,fw,fh);
+ctx.drawImage(el,fx,fy,fw,fh);
 }}else{{
 // 맞춤 (fit): 원본 비율 유지, 여백
 var scale=Math.min(dw/sw,dh/sh);
@@ -867,29 +868,26 @@ var nw=sw*scale,nh=sh*scale;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
 ctx.drawImage(el,ox,oy,nw,nh);
 }}else if(mode==='blur'){{
-// 먼저 현재 프레임을 임시 캔버스에 캡처
-var tempCanvas=document.createElement('canvas');
-tempCanvas.width=sw;tempCanvas.height=sh;
-var tempCtx=tempCanvas.getContext('2d');
-tempCtx.drawImage(el,0,0,sw,sh);
-
-// 블러 배경 그리기
-ctx.filter='blur(20px)';
+// 블러 효과: 축소-확대 기법 (filter보다 훨씬 빠름)
+var blurCanvas=document.createElement('canvas');
+blurCanvas.width=32;blurCanvas.height=32;
+var blurCtx=blurCanvas.getContext('2d');
+blurCtx.drawImage(el,0,0,32,32);
+
+ctx.imageSmoothingEnabled=true;
+ctx.imageSmoothingQuality='high';
 var scale=Math.max(dw/sw,dh/sh)*1.1;
 var nw=sw*scale,nh=sh*scale;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
-ctx.drawImage(tempCanvas,ox,oy,nw,nh);
-ctx.filter='none';
+ctx.drawImage(blurCanvas,ox,oy,nw,nh);
 
-// 어둡게
-ctx.fillStyle='rgba(0,0,0,0.3)';
+ctx.fillStyle='rgba(0,0,0,0.4)';
 ctx.fillRect(0,0,dw,dh);
 
-// 원본 (fit) - 캡처된 프레임 재사용
 var fitScale=Math.min(dw/sw,dh/sh);
 var fw=sw*fitScale,fh=sh*fitScale;
 var fx=(dw-fw)/2,fy=(dh-fh)/2;
-ctx.drawImage(tempCanvas,fx,fy,fw,fh);
+ctx.drawImage(el,fx,fy,fw,fh);
 }}else{{
 var scale=Math.min(dw/sw,dh/sh);
 var nw=sw*scale,nh=sh*scale;