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);
       }
   });
  }
 

posted on 2012-08-22 17:39  NeverGiveUp_ZONE  阅读(5783)  评论(0编辑  收藏  举报