Update app.py

app.py

@@ -44,8 +44,8 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 .media-item-icon{{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px}}
 .media-item-dur{{position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.7);padding:1px 3px;border-radius:2px;font-size:8px;color:#fff}}
 .preview-area{{flex:1;display:flex;flex-direction:column;background:#1a1a1a;margin:6px;border-radius:8px;overflow:hidden}}
-.preview-box{{flex:1;display:flex;align-items:center;justify-content:center;background:#000}}
-#previewCanvas{{max-width:100%;max-height:100%;background:#000}}
+.preview-box{{flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}}
+#previewCanvas{{background:#000;box-shadow:0 0 20px rgba(0,0,0,0.5)}}
 .controls{{height:45px;background:#222;display:flex;align-items:center;justify-content:center;gap:6px}}
 .ctrl-btn{{width:28px;height:28px;border:none;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;cursor:pointer;font-size:12px}}
 .ctrl-btn:hover{{background:rgba(255,255,255,0.2)}}
@@ -104,7 +104,19 @@ body{{font-family:-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7
 <div class="editor">
 <div class="toolbar">
 <div class="toolbar-title">🎬 Video Editor</div>
-<div style="display:flex;gap:4px">
+<div style="display:flex;gap:8px;align-items:center">
+<select id="ratioSelect" onchange="setRatio(this.value)" style="padding:4px 8px;border-radius:4px;border:1px solid #ddd;font-size:11px">
+<option value="16:9">16:9 (가로)</option>
+<option value="9:16">9:16 (세로)</option>
+<option value="1:1">1:1 (정사각)</option>
+<option value="4:3">4:3</option>
+<option value="4:5">4:5 (인스타)</option>
+</select>
+<select id="fillMode" onchange="setFillMode(this.value)" style="padding:4px 8px;border-radius:4px;border:1px solid #ddd;font-size:11px">
+<option value="fit">맞춤 (여백)</option>
+<option value="fill">채우기 (확대)</option>
+<option value="blur">블러 배경</option>
+</select>
 <button class="btn btn-secondary" onclick="undo()">↩ 실행취소</button>
 <button class="btn btn-success" onclick="exportVideo()">📥 내보내기</button>
 </div>
@@ -185,15 +197,46 @@ cancelled:false,
 els:{{}},
 canvas:null,
 ctx:null,
-lastClipId:null
+lastClipId:null,
+ratio:'16:9',
+fillMode:'fit',
+ratioSizes:{{
+'16:9':{{w:1280,h:720,pw:640,ph:360}},
+'9:16':{{w:720,h:1280,pw:203,ph:360}},
+'1:1':{{w:1080,h:1080,pw:360,ph:360}},
+'4:3':{{w:1280,h:960,pw:480,ph:360}},
+'4:5':{{w:1080,h:1350,pw:288,ph:360}}
+}}
 }};
 
 function init(){{
 S.canvas=document.getElementById('previewCanvas');
 S.ctx=S.canvas.getContext('2d');
+updateCanvasSize();
 drawPlaceholder();
 }}
 
+function updateCanvasSize(){{
+var size=S.ratioSizes[S.ratio];
+S.canvas.width=size.pw;
+S.canvas.height=size.ph;
+S.canvas.style.width=size.pw+'px';
+S.canvas.style.height=size.ph+'px';
+}}
+
+function setRatio(r){{
+S.ratio=r;
+updateCanvasSize();
+drawFrame();
+stat('화면 비율: '+r);
+}}
+
+function setFillMode(m){{
+S.fillMode=m;
+drawFrame();
+stat('채우기 모드: '+(m==='fit'?'맞춤 (여백)':m==='fill'?'채우기 (확대)':'블러 배경'));
+}}
+
 function id(){{return Math.random().toString(36).substr(2,9)}}
 function fmt(t){{if(!t||isNaN(t))t=0;var m=Math.floor(t/60),s=Math.floor(t%60),ms=Math.floor((t%1)*100);return String(m).padStart(2,'0')+':'+String(s).padStart(2,'0')+'.'+String(ms).padStart(2,'0')}}
 function r(n){{return Math.round(n*1000)/1000}}
@@ -201,12 +244,14 @@ function stat(m){{document.getElementById('status').textContent=m}}
 function save(){{S.history.push(JSON.stringify(S.clips));if(S.history.length>30)S.history.shift()}}
 
 function drawPlaceholder(){{
+var size=S.ratioSizes[S.ratio];
+var pw=size.pw,ph=size.ph;
 S.ctx.fillStyle='#000';
-S.ctx.fillRect(0,0,640,360);
+S.ctx.fillRect(0,0,pw,ph);
 S.ctx.fillStyle='#444';
 S.ctx.font='14px sans-serif';
 S.ctx.textAlign='center';
-S.ctx.fillText('타임라인에 미디어를 추가하세요',320,180);
+S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
 }}
 
 function addMedia(name,type,url,filePath){{
@@ -540,8 +585,12 @@ return null;
 function drawFrame(){{
 var t=S.time;
 var vc=getClipAt(t,'visual');
+var size=S.ratioSizes[S.ratio];
+var pw=size.pw,ph=size.ph;
+
 S.ctx.fillStyle='#000';
-S.ctx.fillRect(0,0,640,360);
+S.ctx.fillRect(0,0,pw,ph);
+
 if(vc){{
 var el=S.els[vc.mid];
 if(el){{
@@ -555,19 +604,16 @@ if(!S.playing&&!el.paused)el.pause();
 el.volume=S.muted?0:vc.vol;
 }}
 try{{
-var sw=el.videoWidth||el.naturalWidth||el.width||640;
-var sh=el.videoHeight||el.naturalHeight||el.height||360;
-var scale=Math.min(640/sw,360/sh);
-var dw=sw*scale,dh=sh*scale;
-var dx=(640-dw)/2,dy=(360-dh)/2;
-S.ctx.drawImage(el,dx,dy,dw,dh);
+var sw=el.videoWidth||el.naturalWidth||el.width||pw;
+var sh=el.videoHeight||el.naturalHeight||el.height||ph;
+drawWithMode(S.ctx,el,sw,sh,pw,ph,S.fillMode);
 }}catch(e){{}}
 }}
 }}else if(S.clips.length===0){{
 S.ctx.fillStyle='#444';
 S.ctx.font='14px sans-serif';
 S.ctx.textAlign='center';
-S.ctx.fillText('타임라인에 미디어를 추가하세요',320,180);
+S.ctx.fillText('타임라인에 미디어를 추가하세요',pw/2,ph/2);
 }}
 var audioClips=S.clips.filter(function(c){{
 if(c.type!=='audio')return false;
@@ -596,7 +642,40 @@ if(!vc&&!audioClips.length&&S.clips.length>0){{
 S.ctx.fillStyle='#333';
 S.ctx.font='12px sans-serif';
 S.ctx.textAlign='center';
-S.ctx.fillText('재생 위치에 미디어가 없습니다',320,180);
+S.ctx.fillText('재생 위치에 미디어가 없습니다',pw/2,ph/2);
+}}
+}}
+
+function drawWithMode(ctx,el,sw,sh,dw,dh,mode){{
+if(mode==='fill'){{
+// 채우기: 캔버스를 꽉 채우도록 확대, 넘치는 부분 잘림
+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;
+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)';
+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);
+}}else{{
+// 맞춤 (fit): 원본 비율 유지, 여백
+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);
 }}
 }}
 
@@ -625,19 +704,22 @@ doExport();
 }}
 
 async function doExport(){{
+var size=S.ratioSizes[S.ratio];
+var exportW=size.w,exportH=size.h;
+
 // 메인 캔버스 (MediaRecorder 연결용)
 var canvas=document.createElement('canvas');
-canvas.width=1280;canvas.height=720;
+canvas.width=exportW;canvas.height=exportH;
 var ctx=canvas.getContext('2d');
 
 // 오프스크린 캔버스 (렌더링용 - 더블 버퍼링)
 var offCanvas=document.createElement('canvas');
-offCanvas.width=1280;offCanvas.height=720;
+offCanvas.width=exportW;offCanvas.height=exportH;
 var offCtx=offCanvas.getContext('2d');
 
 // 초기 검은 화면
 ctx.fillStyle='#000';
-ctx.fillRect(0,0,1280,720);
+ctx.fillRect(0,0,exportW,exportH);
 
 var stream=canvas.captureStream(30);
 
@@ -654,16 +736,17 @@ var rec=new MediaRecorder(stream,opts);
 var chunks=[];
 rec.ondataavailable=function(e){{if(e.data.size>0)chunks.push(e.data)}};
 
-document.getElementById('exportMsg').textContent='녹화 중...';
+document.getElementById('exportMsg').textContent='녹화 중... ('+S.ratio+')';
 rec.start(100);
 
 var dur=S.dur;
 var fps=30;
-var frameInterval=1000/fps; // 33.33ms
+var frameInterval=1000/fps;
 var totalFrames=Math.ceil(dur*fps);
 var startTime=performance.now();
+var fillMode=S.fillMode;
 
-// 실시간 기반 렌더링 (정확한 타이밍)
+// 실시간 기반 렌더링
 await new Promise(function(resolve){{
 var frameCount=0;
 var lastVideoEl=null;
@@ -673,7 +756,7 @@ function render(){{
 if(S.cancelled){{rec.stop();resolve();return}}
 
 var elapsed=performance.now()-startTime;
-var t=elapsed/1000; // 현재 시간 (초)
+var t=elapsed/1000;
 
 if(t>=dur){{
 rec.stop();
@@ -681,13 +764,11 @@ setTimeout(resolve,100);
 return;
 }}
 
-// 프로그레스 업데이트
 document.getElementById('exportBar').style.width=(t/dur*100)+'%';
 document.getElementById('exportMsg').textContent='녹화 중... '+Math.round(t/dur*100)+'% ('+t.toFixed(1)+'/'+dur.toFixed(1)+'초)';
 
-// 오프스크린 캔버스에 렌더링
 offCtx.fillStyle='#000';
-offCtx.fillRect(0,0,1280,720);
+offCtx.fillRect(0,0,exportW,exportH);
 
 var vc=getClipAt(t,'visual');
 if(vc){{
@@ -695,16 +776,12 @@ var el=S.els[vc.mid];
 if(el){{
 if(vc.type==='video'){{
 var clipT=t-vc.start+vc.ts;
-
-// 클립이 바뀌면 seek하고 재생
 if(lastClipId!==vc.id){{
 el.currentTime=clipT;
 el.play().catch(function(){{}});
 lastClipId=vc.id;
 lastVideoEl=el;
 }}
-
-// 이전 비디오 정지
 if(lastVideoEl&&lastVideoEl!==el&&!lastVideoEl.paused){{
 lastVideoEl.pause();
 }}
@@ -712,31 +789,25 @@ lastVideoEl=el;
 }}
 
 try{{
-var sw=el.videoWidth||el.naturalWidth||el.width||1280;
-var sh=el.videoHeight||el.naturalHeight||el.height||720;
-var scale=Math.min(1280/sw,720/sh);
-var dw=sw*scale,dh=sh*scale;
-offCtx.drawImage(el,(1280-dw)/2,(720-dh)/2,dw,dh);
+var sw=el.videoWidth||el.naturalWidth||el.width||exportW;
+var sh=el.videoHeight||el.naturalHeight||el.height||exportH;
+drawWithModeExport(offCtx,el,sw,sh,exportW,exportH,fillMode);
 }}catch(e){{}}
 }}
 }}else{{
-// 클립 없으면 이전 비디오 정지
 if(lastVideoEl&&!lastVideoEl.paused){{
 lastVideoEl.pause();
 lastClipId=null;
 }}
 }}
 
-// 완성된 프레임을 메인 캔버스로 복사
 ctx.drawImage(offCanvas,0,0);
-
 requestAnimationFrame(render);
 }}
 
 requestAnimationFrame(render);
 }});
 
-// 모든 비디오 정지
 Object.keys(S.els).forEach(function(k){{
 var el=S.els[k];
 if(el&&el.pause)el.pause();
@@ -748,13 +819,13 @@ var webmBlob=new Blob(chunks,{{type:'video/webm'}});
 if(webmBlob.size<1000){{document.getElementById('exportMsg').textContent='녹화 실패';return}}
 
 document.getElementById('exportBar').style.width='100%';
-document.getElementById('exportMsg').textContent='완료! ('+Math.round(webmBlob.size/1024/1024*10)/10+'MB) - 아래에서 다운로드';
+document.getElementById('exportMsg').textContent='완료! ('+Math.round(webmBlob.size/1024/1024*10)/10+'MB, '+S.ratio+') - 아래에서 다운로드';
 
 var downloadDiv=document.createElement('div');
 downloadDiv.style.marginTop='10px';
 var webmLink=document.createElement('a');
 webmLink.href=URL.createObjectURL(webmBlob);
-webmLink.download='video_'+Date.now()+'.webm';
+webmLink.download='video_'+S.ratio.replace(':','x')+'_'+Date.now()+'.webm';
 webmLink.className='btn btn-success';
 webmLink.textContent='📥 WebM 다운로드';
 webmLink.style.marginRight='5px';
@@ -781,6 +852,34 @@ downloadDiv.appendChild(copyBtn);
 document.querySelector('.modal-box').appendChild(downloadDiv);
 }}
 
+// 내보내기용 그리기 함수 (블러 효과 포함)
+function drawWithModeExport(ctx,el,sw,sh,dw,dh,mode){{
+if(mode==='fill'){{
+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;
+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)';
+ctx.fillRect(0,0,dw,dh);
+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);
+}}
+}}
+
 function cancelExport(){{S.cancelled=true;document.getElementById('exportModal').style.display='none'}}
 
 document.addEventListener('keydown',function(e){{