页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

如何实现从照片中裁切自已的肖像呢？

发布：dxy 字体：[增加减小] 类型：转载

在会员注册时，让会员输入头像对后续的功能很重要。很难指望普通人具备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 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 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 全选提示:你可先修改部分代码,再按运行]

Tags：如何实现从照片中裁切自已的肖像呢？