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

更新时间：2007年03月04日 00:00:00 作者：

在会员注册时，让会员输入头像对后续的功能很重要。很难指望普通人具备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 全选注:引入外部Js需再刷新一下页面才能执行]

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

JavaScript中的浅拷贝和深拷贝原理与实现浅析
这篇文章主要介绍了JavaScript中的浅拷贝和深拷贝原理与实现，JavaScript 中的浅拷贝和深拷贝指的是在复制对象（包括对象、数组等）时，是否只复制对象的引用地址或者在复制时创建一个新的对象
2023-04-04
浅谈页面装载js及性能分析方法
这篇文章主要简单介绍了页面装载js及性能分析方法的相关资料,需要的朋友可以参考下
2014-12-12
减少访问DOM的次数提升javascript性能
访问修改DOM元素都会导致浏览器重新计算页面的几何变化，下面为大家介绍下javascript性能提升方法,需要的朋友可以参考下
2014-02-02
JS模拟实现方法重载示例
这篇文章主要介绍了JS模拟实现方法重载,涉及js基于arguments实现重载的相关技巧,需要的朋友可以参考下
2016-08-08
JavaScript数组类型Array相关的属性与方法详解
这篇文章主要给大家介绍了关于JavaScript数组类型Array相关的属性与方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
Three.js如何实现雾化效果示例代码
雾化效果是3D的比较常见的特性，在游戏中见到的烟雾、爆炸火焰以及白云等效果都是雾化的结果，下面这篇文章主要给大家介绍了关于Three.js如何实现雾化效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
Javascript对象按照属性排序方法示例探究
这篇文章主要介绍了Javascript对象按照属性排序方法示例探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01
JavaScript中0和""比较引发的问题
这篇文章主要介绍了JavaScript中0和""比较引发的问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-05-05
Webpack学习之动态import原理及源码分析
这篇文章主要为大家介绍了Webpack学习之动态import原理及源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件
这篇文章主要介绍了Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具