Imgareaselect 是一个 允许用户使用简单、直观的点击、拖动界面图像选择矩形区域的jQuery插件。该插件可用于 web 应用程序中轻松实现图像裁剪功能,以及其他功能,如照片标记、 图像编辑功能,等等.
支持浏览器:
Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.
一、加载
<head> ... <linkrel="stylesheet"type="text/css"href="css/imgareaselect-default.css"/>
<scripttype="text/javascript"src="scripts/jquery.min.js"></script>
<scripttype="text/javascript"src="scripts/jquery.imgareaselect.pack.js"></script>
...
</head>
二、文档
中文:http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html
English :http://odyniec.net/projects/imgareaselect/usage.html
三、使用
<img id="img5" src="" name="img5"/>
使用jquery的data储存数据:
$(document).ready(function () {
var ias =$('img#img5').imgAreaSelect({
fadeSpeed: 400,
handles: true,
instance: true,
aspectRatio: '4:3',
maxHeight: 84,
maxWidth:94,
onSelectEnd:function(img, selection) {
$('#img5').data('x',selection.x1);
$('#img5').data('y',selection.y1);
$('#img5').data('w',selection.width);
$('#img5').data('h',selection.height);
}
});
}