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

在会员注册时，让会员输入头像对后续的功能很重要。很难指望普通人具备photoshop的操作能力，让他们提供合乎尺寸的个人照片不太现实。还好现在可以让服务端支持图片处理，我们只需要在客户端提供用户设计图片的接口就可以了。

下面的程序实现了裁切缩放部分图片的功能。从技术上来看，主要是怎么让半透明的摭罩中空，为了实现这一点，我使用了3*3的表格来模拟座标上的矩形，通过指定左上单元格的宽高来设置矩形的座标，而中心单元格的宽高则与矩形的尺寸相对应。

#tbHole td{background:white;filter:alpha(opacity=50);-moz-opacity:.5}
#tbHole img{width:1;height:1;visibility:hidden}
v\:*{behavior:url(#default#vml)}

function $(obj){
return typeof(obj)=="object"?"obj":document.getElementById(obj)
}
bxHole_ini()
function bxHole_ini(){
var bx=$("bxHole"),tb=$("tbHole")
$("bxImgHoleShow").innerHTML=""
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()
}

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