Update app-backup-last.py

app-backup-last.py

@@ -654,22 +654,35 @@ 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'){{
-// 블러 배경: 배경에 확대+블러, 그 위에 원본
-// 먼저 배경 (확대해서 꽉 채우기)
-ctx.filter='blur(20px)';
+// 프레임 먼저 캡처
+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=16;blurCanvas.height=16;
+var blurCtx=blurCanvas.getContext('2d');
+blurCtx.drawImage(frameCanvas,0,0,16,16);
+
+// 배경
+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(el,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(el,fx,fy,fw,fh);
+ctx.drawImage(frameCanvas,fx,fy,fw,fh);
 }}else{{
 // 맞춤 (fit): 원본 비율 유지, 여백
 var scale=Math.min(dw/sw,dh/sh);
@@ -747,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;
@@ -791,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{{
@@ -859,25 +885,39 @@ 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'){{
-ctx.filter='blur(20px)';
-var scale=Math.max(dw/sw,dh/sh)*1.1;
+}}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.filter='none';
-ctx.fillStyle='rgba(0,0,0,0.3)';
+}}
+}}
+
+// 블러 전용 - 캡처된 프레임으로 처리
+function drawBlurFromFrame(ctx,frameCanvas,sw,sh,dw,dh){{
+// 1. 작은 캔버스로 축소 (블러 효과)
+var blurCanvas=document.createElement('canvas');
+blurCanvas.width=16;blurCanvas.height=16;
+var blurCtx=blurCanvas.getContext('2d');
+blurCtx.drawImage(frameCanvas,0,0,16,16);
+
+// 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(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'}}