jQuery插件imgAreaSelect使用

2023-11-09 03:37•css•阅读 4978

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>

二、文档

三、使用

<img />

使用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);

}

});

}