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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 如何实现从照片中裁切自已的肖像呢？

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 276 ::

收藏到网摘: n/a

解决远程页面抓取中的乱码问题？参考：关于Javascript中实现暂停的几篇文章

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

解决远程页面抓取中的乱码问题？参考：关于Javascript中实现暂停的几篇文章

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

评论 (0) All

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