这篇文章主要介绍了如何使用jQuery插件imgAreaSelect实现截图功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何使用jQuery插件imgAreaSelect实现截图功能文章都会有所收获，下面我们一起来看看吧。
一，准备：
两个JS文件
1，jquery.js 下载：jquery.js
2，jquery.imgareaselect.js 下载：jquery.imgareaselect.js[imgareaselect-0.6.2.zip]
二，使用
function preview(img, selection){
var scaleX = 100 / selection.width;
var scaleY = 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><img src="biuuu.jpg" /></div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter($('#biuuu'));
});
//初始化加载
$(window).load(function () {
$('#biuuu').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});
三，调用
<div class="container"> <p> <img id="biuuu" src="biuuu.jpg" title="biuuu" /> </p> </div>