Update app.py

app.py

@@ -654,14 +654,19 @@ 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'){{
-// 블러 효과: 축소-확대 기법 (filter보다 훨씬 빠름)
-// 1. 아주 작은 캔버스에 그려서 픽셀화
+// 프레임 먼저 캡처
+var frameCanvas=document.createElement('canvas');
+frameCanvas.width=sw;frameCanvas.height=sh;
+var frameCtx=frameCanvas.getContext('2d');
+frameCtx.drawImage(el,0,0,sw,sh);
+
+// 블러용 작은 캔버스
 var blurCanvas=document.createElement('canvas');
-blurCanvas.width=32;blurCanvas.height=32;
+blurCanvas.width=16;blurCanvas.height=16;
 var blurCtx=blurCanvas.getContext('2d');
-blurCtx.drawImage(el,0,0,32,32);
+blurCtx.drawImage(frameCanvas,0,0,16,16);
 
-// 2. 작은 이미지를 확대하면 자연스러운 블러 효과
+// 배경
 ctx.imageSmoothingEnabled=true;
 ctx.imageSmoothingQuality='high';
 var scale=Math.max(dw/sw,dh/sh)*1.1;
@@ -669,15 +674,15 @@ var nw=sw*scale,nh=sh*scale;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
 ctx.drawImage(blurCanvas,ox,oy,nw,nh);
 
-// 3. 어둡게
+// 어둡게
 ctx.fillStyle='rgba(0,0,0,0.4)';
 ctx.fillRect(0,0,dw,dh);
 
-// 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(el,fx,fy,fw,fh);
+ctx.drawImage(frameCanvas,fx,fy,fw,fh);
 }}else{{
 // 맞춤 (fit): 원본 비율 유지, 여백
 var scale=Math.min(dw/sw,dh/sh);
@@ -755,6 +760,11 @@ var startTime=performance.now();
 var fillMode=S.fillMode;
 
 // 실시간 기반 렌더링
+// 블러 모드용 프레임 캡처 캔버스 (재사용)
+var frameCanvas=document.createElement('canvas');
+frameCanvas.width=1920;frameCanvas.height=1080;
+var frameCtx=frameCanvas.getContext('2d');
+
 await new Promise(function(resolve){{
 var frameCount=0;
 var lastVideoEl=null;
@@ -799,7 +809,15 @@ lastVideoEl=el;
 try{{
 var sw=el.videoWidth||el.naturalWidth||el.width||exportW;
 var sh=el.videoHeight||el.naturalHeight||el.height||exportH;
+
+// 블러 모드: 프레임을 먼저 캡처
+if(fillMode==='blur'){{
+frameCanvas.width=sw;frameCanvas.height=sh;
+frameCtx.drawImage(el,0,0,sw,sh);
+drawBlurFromFrame(offCtx,frameCanvas,sw,sh,exportW,exportH);
+}}else{{
 drawWithModeExport(offCtx,el,sw,sh,exportW,exportH,fillMode);
+}}
 }}catch(e){{}}
 }}
 }}else{{
@@ -867,13 +885,23 @@ var scale=Math.max(dw/sw,dh/sh);
 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'){{
-// 블러 효과: 축소-확대 기법 (filter보다 훨씬 빠름)
+}}else{{
+var scale=Math.min(dw/sw,dh/sh);
+var nw=sw*scale,nh=sh*scale;
+var ox=(dw-nw)/2,oy=(dh-nh)/2;
+ctx.drawImage(el,ox,oy,nw,nh);
+}}
+}}
+
+// 블러 전용 - 캡처된 프레임으로 처리
+function drawBlurFromFrame(ctx,frameCanvas,sw,sh,dw,dh){{
+// 1. 작은 캔버스로 축소 (블러 효과)
 var blurCanvas=document.createElement('canvas');
-blurCanvas.width=32;blurCanvas.height=32;
+blurCanvas.width=16;blurCanvas.height=16;
 var blurCtx=blurCanvas.getContext('2d');
-blurCtx.drawImage(el,0,0,32,32);
+blurCtx.drawImage(frameCanvas,0,0,16,16);
 
+// 2. 배경에 확대해서 그림
 ctx.imageSmoothingEnabled=true;
 ctx.imageSmoothingQuality='high';
 var scale=Math.max(dw/sw,dh/sh)*1.1;
@@ -881,19 +909,15 @@ var nw=sw*scale,nh=sh*scale;
 var ox=(dw-nw)/2,oy=(dh-nh)/2;
 ctx.drawImage(blurCanvas,ox,oy,nw,nh);
 
+// 3. 어둡게
 ctx.fillStyle='rgba(0,0,0,0.4)';
 ctx.fillRect(0,0,dw,dh);
 
+// 4. 원본 (캡처된 프레임 사용)
 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(el,fx,fy,fw,fh);
-}}else{{
-var scale=Math.min(dw/sw,dh/sh);
-var nw=sw*scale,nh=sh*scale;
-var ox=(dw-nw)/2,oy=(dh-nh)/2;
-ctx.drawImage(el,ox,oy,nw,nh);
-}}
+ctx.drawImage(frameCanvas,fx,fy,fw,fh);
 }}
 
 function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}