1.添加js脚本库
<script type="text/javascript" src="jquery3.2.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect-0.8.js"></script>
jquery http://jquery.com/
jquery.imgareaselect-0.8.js这里下载 http://odyniec.net/projects/imgareaselect/
2.添加下列脚本
$(window).load(function () 
{
$('#ferret').imgAreaSelect({ selectionOpacity: 0.1
, borderWidth: 1,aspectRatio:'1:1',
onSelectChange: preview ,onSelectEnd: getCss
});});
添加回调函数
/**//**
图片裁剪过程中调用方法
**/
function preview(img, selection)
{
var scaleX = 180 / (selection.width || 1);
var scaleY = 180 / (selection.height || 1);
$('#ferret + div > img').css({
width: Math.round(scaleX * 300) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
/**//**
图片裁剪完调用方法
**/
function getCss(img, selection){
var str="{x1:"+selection.x1+","+
"x2:"+selection.x2+","+
"y1:"+selection.y1+","+
"y2:"+selection.y2+","+
"width:"+selection.width+","+
"height:"+selection.height+"}";
alert(str);
}
用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="jquery3.2.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect-0.8.js"></script>
<script type="text/javascript">
/**//**
图片裁剪过程中调用方法
**/
function preview(img, selection)
{
var scaleX = 180 / (selection.width || 1);
var scaleY = 180 / (selection.height || 1);
$('#ferret + div > img').css({
width: Math.round(scaleX * 300) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
/**//**
图片裁剪完调用方法
**/
function getCss(img, selection){
var str="{x1:"+selection.x1+","+
"x2:"+selection.x2+","+
"y1:"+selection.y1+","+
"y2:"+selection.y2+","+
"width:"+selection.width+","+
"height:"+selection.height+"}";
alert(str);
}
$(document).ready(function () {
$('<div><img src="bee.jpg" style="position: relative;" /></div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '180px',
height: '180px'
})
.insertAfter($('#ferret'));
});
$(window).load(function () {
$('#ferret').imgAreaSelect({ selectionOpacity: 0.1
, borderWidth: 1,aspectRatio:'1:1',
onSelectChange: preview ,onSelectEnd: getCss
});});
</script>
</HEAD>
<BODY>
<div>
<img src="bee.jpg" id="ferret" name="ferret" width="300px" height="300px"/>
</div>
</BODY>
</HTML>
完整介绍：http://odyniec.net/projects/imgareaselect/