How to crop your own portrait from a photo? _javascript skills

When members register, it is important for members to enter their avatar for subsequent functions. It is difficult to expect ordinary people to have the ability to operate photoshop, and it is unrealistic for them to provide personal photos of suitable sizes. Fortunately, the server can now support image processing. We only need to provide an interface for users to design images on the client.

The following program implements the function of cropping and zooming part of the picture. From a technical point of view, the main thing is how to make the translucent mask hollow. In order to achieve this, I used a 3*3 table to simulate a rectangle on the coordinates, and set the base of the rectangle by specifying the width and height of the upper left cell. The center cell's width and height correspond to the dimensions of the rectangle.

<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="How to crop your own portrait from a photo? _javascript skills" ></td> <td width="120"><img alt="How to crop your own portrait from a photo? _javascript skills" ></td> <td><img alt="How to crop your own portrait from a photo? _javascript skills" ></td> </tr> <tr height="140"> <td><img alt="How to crop your own portrait from a photo? _javascript skills" ></td> <td onmousedown="$('bxHole').dragStart(event,0)" style="background:transparent;filter:;-moz-opacity:1;cursor:move;border:1px solid white !important"><img alt="How to crop your own portrait from a photo? _javascript skills" ></td> <td><img alt="How to crop your own portrait from a photo? _javascript skills" ></td> </tr> <tr> <td><img alt="How to crop your own portrait from a photo? _javascript skills" ></td> <td><img alt="How to crop your own portrait from a photo? _javascript skills" ></td> <td><img alt="How to crop your own portrait from a photo? _javascript skills" ></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="How to crop your own portrait from a photo? _javascript skills" > <img id="bxHoleMove2" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,2)" style="max-width:90%" alt="How to crop your own portrait from a photo? _javascript skills" > <img id="bxHoleMove3" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,3)" style="max-width:90%" alt="How to crop your own portrait from a photo? _javascript skills" > <img id="bxHoleMove4" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,4)" style="max-width:90%" alt="How to crop your own portrait from a photo? _javascript skills" > </div> <div id="bxImgHoleShow" style="position:absolute;left:850;top:50;width:120;height:140;border:1px solid #808080;overflow:hidden"></div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]
<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>