如何實現從照片中裁切自已的肖像呢？

2019-11-21 02:15:02

字體：大中小

來源：轉載

供稿：網友

在會員注冊時，讓會員輸入頭像對后續的功能很重要。很難指望普通人具備photoshop的操作能力，讓他們提供合乎尺寸的個人照片不太現實。還好現在可以讓服務端支持圖片處理，我們只需要在客戶端提供用戶設計圖片的接口就可以了。

下面的程序實現了裁切縮放部分圖片的功能。從技術上來看，主要是怎么讓半透明的摭罩中空，為了實現這一點，我使用了3*3的表格來模擬座標上的矩形，通過指定左上單元格的寬高來設置矩形的座標，而中心單元格的寬高則與矩形的尺寸相對應。

<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   class="iwvjtn8m0"   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></td><td width=120><img></td><td><img></td></tr>         <tr height=140>             <td><img></td>             <td onmousedown=$('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 onmousedown=$('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 onmousedown=$('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 onmousedown=$('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 onmousedown=$('bxHole').dragStart(event,4) style="cursor:sw-resize;position:absolute;width:5;height:5;border:1px solid white;background:#BCBCBC"> </div> <div   class="iwvjtn8m0"   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.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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：使用透明疊加法美化文件上傳界面的代碼

下一篇：解決遠程頁面抓取中的亂碼問題？