参考网址

http://www.cnblogs.com/cjqa/p/4386489.html


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css"/>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>

</head>

<body>

<div class="frame" >

　　<img id="photo" src="./p_w_picpaths/b.jpg" />

</div>


<div id="preview" >

　　<img src="./p_w_picpaths/b.jpg" />

</div>

</body>

<script type="text/javascript">

function preview(img, selection) {

if (!selection.width || !selection.height) { return; }

var scaleX = 250 / selection.width;

var scaleY = 200 / selection.height;

var hei = $('#photo').height();

var wid = $('#photo').width();

$('#preview img').css({

width: Math.round(scaleX * wid),

height: Math.round(scaleY * hei),

marginLeft: -Math.round(scaleX * selection.x1),

marginTop: -Math.round(scaleY * selection.y1)

});

}


$(function () {

$('#photo').imgAreaSelect({

//aspectRatio: '1:1',

handles: true,

fadeSpeed: 200, onSelectChange: preview

});

});

</script>

</html>


附件：http://down.51cto.com/data/2366952