如何實現(xiàn)從照片中裁切自已的肖像呢？

更新時間：2007年03月04日 00:00:00 作者：

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

下面的程序實現(xiàn)了裁切縮放部分圖片的功能。從技術上來看，主要是怎么讓半透明的摭罩中空，為了實現(xiàn)這一點，我使用了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="wppm3vysvbp"   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="wppm3vysvbp"   id=bxImgHoleShow style="position:absolute;left:850;top:50;width:120;height:140;border:1px solid #808080;overflow:hidden"></div> </BODY> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]