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

在会员注册时，让会员输入头像对后续的功能很重要。很难指望普通人具备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> <img><img><img><img> <img> <img><img><img><img>  <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">   </BODY> </html>

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

热门搜索

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

猜你喜欢

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

为什么鼠标自已会动呢？

s8lol主宰符文怎么配

PS制作照片中的照片效果

二十行语句实现从Excel到mysql的转化

lol偷钱流符文搭配推荐

PS制作照片中的照片效果教程

打造照片中的仙境效果

lolAD刺客新符文搭配推荐

怎么给QQ设置双重登陆密码？

java HashMap的keyset实例