JS实现从照片中裁切自已的肖像

﹏ヽ暗。殇╰゛Y 2021-11-11 23:32 283阅读 0赞

**代码如下:**  
<HTML xmlns:v> <BODY> <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) οndragstart=return(false) οnmοusedοwn=return(false) οncοntextmenu=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></td><td width=120><img></td><td><img></td></tr> <tr height=140> <td><img></td> <td οnmοusedοwn=$('bxHole').dragStart(event,0) style="background:transparent;filter:;-moz-opacity:1;cursor:move;border:1px solid white !important"><img></td> <td><img></td> </tr> <tr><td><img></td><td><img></td><td><img></td></tr> </table> <img id=bxHoleMove1 src=http://www.5djs.com/images/upload/41.gif οnmοusedοwn=$('bxHole').dragStart(event,1) style="cursor:nw-resize;position:absolute;width:5;height:5;border:1px solid white;background:\#BCBCBC"> <img id=bxHoleMove2 src=http://www.5djs.com/images/upload/41.gif οnmοusedοwn=$('bxHole').dragStart(event,2) style="cursor:sw-resize;position:absolute;width:5;height:5;border:1px solid white;background:\#BCBCBC"> <img id=bxHoleMove3 src=http://www.5djs.com/images/upload/41.gif οnmοusedοwn=$('bxHole').dragStart(event,3) style="cursor:nw-resize;position:absolute;width:5;height:5;border:1px solid white;background:\#BCBCBC"> <img id=bxHoleMove4 src=http://www.5djs.com/images/upload/41.gif οnmοusedοwn=$('bxHole').dragStart(event,4) style="cursor:sw-resize;position:absolute;width:5;height:5;border:1px solid white;background:\#BCBCBC"> </div> <div id=bxImgHoleShow style="position:absolute;left:850;top:50;width:120;height:140;border:1px solid \#808080;overflow:hidden"></div> </BODY> </html> <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.οnmοuseup=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.οnmοusemοve=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>  
\[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码\]

转载于:https://www.cnblogs.com/Dicky/archive/2007/01/12/618741.html