javascript截图 jQuery插件imgAreaSelect使用详解
为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是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]
二，使用
functionpreview(img,selection){
varscaleX=100/selection.width;
varscaleY=100/selection.height;
//动态小头像获取当前选中框的宽度，高度，左边框，右边框
$('#biuuu+div>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'
});
}
//加载小头像
$(document).ready(function(){
$('<div><imgsrc="biuuu.jpg"style="position:relative;"/></div>')
.css({
float:'left',
position:'relative',
overflow:'hidden',
width:'100px',
height:'100px'
})
.insertAfter($('#biuuu'));
});
//初始化加载
$(window).load(function(){
$('#biuuu').imgAreaSelect({aspectRatio:'1:1',onSelectChange:preview});
});
三，调用
<divclass="container"> <p> <imgid="biuuu"src="biuuu.jpg"title="biuuu"style="float:left;margin-right:10px;"/> </p> </div>
使用上面的javascript截图进行扩展可以实现很多的动态功能，jQuery提供的imgAreaSelect插件调用非常简单，其它相关应用可参考：imgAreaSelectExamples
使用jQuery插件imgAreaSelect实现javascript截图还是非常简单的，基本上就是一个动态的图像显示，获取源图片的位置和选取框的大小[宽度和高度]，轻松实现javascript截图功能。