溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
參考網址
http://www.cnblogs.com/cjqa/p/4386489.html
http://blog.csdn.net/china_lzn/article/details/7553552（未測試）
<!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>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
