为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用。主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能。
一,准备:
@H_404_2@两个JS文件
1,jquery.js 下载:jquery.js
2,jquery.imgareaselect.js 下载:jquery.imgareaselect.js[imgareaselect-0.6.2.zip]
二,使用 @H_404_2@
//动态小头像 获取当前选中框的宽度,高度,左边框,右边框 @H_404_2@
img').css({
width: Math.round(scaleX * 400) + 'px',height: Math.round(scaleY * 300) + 'px',marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
//加载小头像 @H_404_2@
')
.css({
float: 'left',position: 'relative',overflow: 'hidden',width: '100px',height: '100px'
})
.insertAfter($('#biuuu'));
});
