사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술

회원 등록 시 회원이 후속 기능을 위해 아바타를 입력하는 것이 중요합니다. 일반 사람들이 포토샵을 조작할 수 있는 능력을 갖기를 기대하기 어렵고, 적당한 크기의 개인 사진을 제공하는 것도 비현실적입니다. 다행스럽게도 이제 서버는 이미지 처리를 지원할 수 있습니다. 사용자가 클라이언트에서 이미지를 디자인할 수 있는 인터페이스만 제공하면 됩니다.

다음 프로그램은 사진의 일부를 자르고 확대/축소하는 기능을 구현합니다. 기술적인 관점에서 가장 중요한 것은 반투명 마스크를 어떻게 비우게 만드는가입니다. 이를 달성하기 위해 3*3 테이블을 사용하여 좌표에 직사각형을 시뮬레이션하고 직사각형의 밑면을 지정하여 설정했습니다. 왼쪽 상단 셀의 너비와 높이 중앙 셀의 너비와 높이는 직사각형의 크기에 해당합니다.

<style> #tbHole td{background:white;filter:alpha(opacity=50);-moz-opacity:.5} #tbHole img{width:1;height:1;visibility:hidden} v:*{behavior:url(#default#vml)} </style> <div id="bxHole" onselectstart="return(false)" ondragstart="return(false)" onmousedown="return(false)" oncontextmenu="return(false)" style="position:absolute;left:0;top:0;width:800;height:600;border:1px solid #808080;background:url(http://album.sina.com.cn/pic/40db9aaa02000eh1)"> <table id="tbHole" cellpadding="0" cellspacing="0" width="100%" height="100%" style="position:absolute"> <tr height="158"> <td width="243"><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> <td width="120"><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> <td><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> </tr> <tr height="140"> <td><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> <td onmousedown="$('bxHole').dragStart(event,0)" style="background:transparent;filter:;-moz-opacity:1;cursor:move;border:1px solid white !important"><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> <td><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> </tr> <tr> <td><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> <td><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> <td><img alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" ></td> </tr> </table> <img id="bxHoleMove1" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,1)" style="max-width:90%" alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" > <img id="bxHoleMove2" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,2)" style="max-width:90%" alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" > <img id="bxHoleMove3" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,3)" style="max-width:90%" alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" > <img id="bxHoleMove4" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,4)" style="max-width:90%" alt="사진에서 자신의 인물 사진을 자르는 방법은 무엇입니까? _자바스크립트 기술" > </div> <div id="bxImgHoleShow" style="position:absolute;left:850;top:50;width:120;height:140;border:1px solid #808080;overflow:hidden"></div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]
<script> function $(obj){ return typeof(obj)=="object"?"obj":document.getElementById(obj) } bxHole_ini() function bxHole_ini(){ var bx=$("bxHole"),tb=$("tbHole") $("bxImgHoleShow").innerHTML="<"+(document.all?"v:image":"img")+" id=imgHoleShow src='http://album.sina.com.cn/pic/40db9aaa02000eh1' style='position:absolute;left:0;top:0;width:800;height:600' />" bx.w0=tb.rows[0].cells[1].offsetWidth bx.h0=tb.rows[1].offsetHeight bx.w_img=$("imgHoleShow").offsetWidth bx.h_img=$("imgHoleShow").offsetHeight bx.dragStart=function(e,dragType){ bx.dragType=dragType bx.px=tb.rows[0].cells[0].offsetWidth bx.py=tb.rows[0].offsetHeight bx.pw=tb.rows[0].cells[1].offsetWidth bx.ph=tb.rows[1].offsetHeight bx.sx=e.screenX bx.sy=e.screenY } bx.onmouseup=function(){ if(bx.dragType==null) return var w=tb.rows[0].cells[1].offsetWidth,h=tb.rows[1].offsetHeight bx.dragType=null if(w/h>bx.w0/bx.h0) tb.rows[0].cells[1].style.width=h*bx.w0/bx.h0 else tb.rows[1].style.height=w*bx.h0/bx.w0 bx.setTip() } bx.onmousemove=function(e){ var x,y,w,h if(bx.dragType==null) return if(e==null) e=event x=Math.max(bx.px+e.screenX-bx.sx,1) y=Math.max(bx.py+e.screenY-bx.sy,1) w=Math.min(bx.pw+e.screenX-bx.sx,tb.offsetWidth-bx.px-1) h=Math.min(bx.ph+e.screenY-bx.sy,tb.offsetHeight-bx.py-1) if(bx.dragType==0){ x=Math.min(x,tb.offsetWidth-bx.pw-1) y=Math.min(y,tb.offsetHeight-bx.ph-1) w=bx.pw h=bx.ph } if(bx.dragType==1||bx.dragType==4) w=bx.pw+bx.px-x if(bx.dragType==1||bx.dragType==2) h=bx.ph+bx.py-y if(bx.dragType==2||bx.dragType==3) x=bx.px if(bx.dragType==3||bx.dragType==4) y=bx.py w=Math.max(w,bx.w0/2) h=Math.max(h,bx.h0/2) if(bx.dragType==1||bx.dragType==4) x=bx.pw+bx.px-w if(bx.dragType==1||bx.dragType==2) y=bx.ph+bx.py-h tb.rows[0].cells[0].style.width=x tb.rows[0].cells[1].style.width=w tb.rows[0].style.height=y tb.rows[1].style.height=h $("bxHole").setTip() } bx.setTip=function(){ var x=tb.rows[0].cells[0].offsetWidth,y=tb.rows[0].offsetHeight,w=tb.rows[0].cells[1].offsetWidth,h=tb.rows[1].offsetHeight var img=$("imgHoleShow"),per $("bxHoleMove1").style.left=$("bxHoleMove4").style.left=x-3 $("bxHoleMove1").style.top=$("bxHoleMove2").style.top=y-3 $("bxHoleMove2").style.left=$("bxHoleMove3").style.left=x+w-4 $("bxHoleMove3").style.top=$("bxHoleMove4").style.top=y+h-4 if(w/h>bx.w0/bx.h0) w=h*bx.w0/bx.h0 else h=w*bx.h0/bx.w0 per=bx.h0/h img.style.width=per*bx.w_img img.style.height=per*bx.h_img img.style.left=-x*per img.style.top=-y*per } bx.setTip() } </script>