为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用。主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能。
一,准备:
两个JS文件 1,jquery.js 下载:jquery.js 2,jquery.imgareaselect.js 下载:jquery.imgareaselect.js[imgareaselect-0.6.2.zip]二,使用
//动态小头像 获取当前选中框的宽度,高度,左边框,右边框
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'
});
}