插件主页：http://odyniec.net/projects/imgareaselect/

官方网站上说明支持的浏览器：The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

插件的主要功能包括：

1. 可以选取固定比例 或 任意比例的选区

2. 可以设置选区的长宽最大最小限值

3. 可以设默认显示初始选区

4. 可以用鼠标移动选区的位置，不能移出原始图片的范围

5. 可以用鼠标对选区进行缩放 ( 鼠标按住8个点 ( handles: true ) 其中1点不放移动：左上、左、左下、右上、右、右下 )

6. 可以显示选区预览图

7. 可以显示选区的各点 ( 左上和右下 ) 坐标和长度与宽度

下载的插件包大小 56.4 k，插件包中不含 demo，只包含 css 文件夹、 script 文件夹和两个 LICENSE 文件。

一.创建demo：

在根目录下创建demo.html ，在头部链接引入 css 文件和 js 文件

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

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

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

注：插件包中所带的 jquery 版本为 jQuery v1.9.0

html 结构包括 原图、选区缩略图和信息。原图和选区预览图：

<!-- 原图 -->

<div>

     <img id="photo" src="data:images/pic3.jpg"/>

</div>

<!-- 选区预览图 -->

<div id="preview" style="width: 100px; height: 100px; overflow: hidden;">

     <img style="position: relative;">

</div>

信息，包括选区起点和终点的横纵坐标、选区的长度和高度：

<table style="margin-top: 1em;">

          <thead>

            <tr>

              <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">

                坐标

              </th>

              <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">

                尺寸

              </th>

            </tr>

          </thead>

          <tbody>

            <tr>

              <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>

                  <td style="width: 30%;"><input type="text" id="x1" value="-"></td>

                  <td style="width: 20%;"><b>Width:</b></td>

                <td><input type="text" value="-" id="w"></td>

            </tr>

            <tr>

              <td><b>Y<sub>1</sub>:</b></td>

              <td><input type="text" id="y1" value="-"></td>

              <td><b>Height:</b></td>

              <td><input type="text" id="h" value="-"></td>

            </tr>

            <tr>

              <td><b>X<sub>2</sub>:</b></td>

              <td><input type="text" id="x2" value="-"></td>

              <td></td>

              <td></td>

            </tr>

            <tr>

              <td><b>Y<sub>2</sub>:</b></td>

              <td><input type="text" id="y2" value="-"></td>

              <td></td>

              <td></td>

            </tr>

          </tbody>

</table>

js 设置：

 <script type="text/javascript">

     function preview(img, selection) {

         if (!selection.width || !selection.height)

             return;

         //预览图尺寸等比例缩放，以100为临界，当在原图中选定的区域大于100px时，预览图中图像缩小；当在原图中选定的区域小于100px时，预览图中图像放大；selection为选区

         var scaleX = 100 / selection.width;

         var scaleY = 100 / selection.height;

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

             width: Math.round(scaleX * 400), //原图宽400

             height: Math.round(scaleY * 300), //原图高300

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

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

         });

         $('#x1').val(selection.x1);

         $('#y1').val(selection.y1);

         $('#x2').val(selection.x2);

         $('#y2').val(selection.y2);

         $('#w').val(selection.width);

         $('#h').val(selection.height);

     }

     $(function () {

         //onSelectChange: preview 使用缩略图

         //模式一.选区宽高比为1:1

         //$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });

         //模式二.选区最大宽度200，最大高度150

         //$('#photo').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true, fadeSpeed: 200, onSelectChange: preview });

         //模式三.选区的起点和终点初始坐标

         //$('#photo').imgAreaSelect({ x1: 116, y1: 77, x2: 276, y2: 237, aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });

         //模式四.任意尺寸的选区

         $('#photo').imgAreaSelect({ handles: true, fadeSpeed: 200, onSelectChange: preview });

         //缩略图的图片

         $("#preview img").attr("src",$("#photo").attr("src"));

     });

 </script>

二. 预览图的成像原理：

在 html 中，预览窗口的宽度和高度设各置成了 100px ，scaleX 和 scaleY 分别表示预览窗口中图像的缩放比例，以预览窗口的长和高的缩放比等于 100px 除以 原始图像上选区的长和宽，这样当选区的长和宽小于 100px 时，预览图片会被等比放大

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

        width: Math.round(scaleX * 400), //原图宽400

        height: Math.round(scaleY * 300), //原图高300

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

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

});

当选区的长和宽大于 100px 时，预览图片会被等比缩小：

三. 在 js 中，可以设置 4 种选区模式：

1. 固定选区长宽比，可以设置成 1:1 , 4:3 等模式，如图：

2. 设置选区的最大 ( 最小 ) 宽度和最大 ( 最小 ) 高度

3. 初始时默认显示选区，并给定初始选区的各点 ( 左上和右下 ) 坐标

4. 选取任意尺寸的选区

完整demo.html:

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>imgAreaSelect demo1</title>

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

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

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

   <script type="text/javascript">

     function preview(img, selection) {

         if (!selection.width || !selection.height)

             return;

         //预览图尺寸等比例缩放，以100为临界，当在原图中选定的区域大于100px时，预览图中图像缩小；当在原图中选定的区域小于100px时，预览图中图像放大；

         var scaleX = 100 / selection.width;

         var scaleY = 100 / selection.height;

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

             width: Math.round(scaleX * 400), //原图宽400

             height: Math.round(scaleY * 300), //原图高300

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

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

         });

         $('#x1').val(selection.x1);

         $('#y1').val(selection.y1);

         $('#x2').val(selection.x2);

         $('#y2').val(selection.y2);

         $('#w').val(selection.width);

         $('#h').val(selection.height);

     }

     $(function () {

         //onSelectChange: preview 使用缩略图

         //选区宽高比为1:1

         //$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });

         //选区最大宽度200，最大高度150

         //$('#photo').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true, fadeSpeed: 200, onSelectChange: preview });

         //选区的起点和终点初始坐标

         //$('#photo').imgAreaSelect({ x1: 116, y1: 77, x2: 276, y2: 237, aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });

         //任意尺寸的选区

         $('#photo').imgAreaSelect({ handles: true, fadeSpeed: 200, onSelectChange: preview });

         //缩略图的图片

         $("#preview img").attr("src",$("#photo").attr("src"));

     });

 </script>

 </head>

 <body>

     <div id="container">

         <!-- 原图 -->

         <div>

             <img id="photo" src="data:images/pic3.jpg"/>

         </div>

         <!-- 选区缩略图 -->

         <div id="preview" style="width: 100px; height:100px; overflow: hidden;">

             <img style="position: relative;">

         </div>

         <!-- 信息 -->

         <table style="margin-top: 1em;">

           <thead>

             <tr>

               <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">

                 坐标

               </th>

               <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">

                 尺寸

               </th>

             </tr>

           </thead>

           <tbody>

             <tr>

               <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>

                   <td style="width: 30%;"><input type="text" id="x1" value="-"></td>

                   <td style="width: 20%;"><b>Width:</b></td>

                 <td><input type="text" value="-" id="w"></td>

             </tr>

             <tr>

               <td><b>Y<sub>1</sub>:</b></td>

               <td><input type="text" id="y1" value="-"></td>

               <td><b>Height:</b></td>

               <td><input type="text" id="h" value="-"></td>

             </tr>

             <tr>

               <td><b>X<sub>2</sub>:</b></td>

               <td><input type="text" id="x2" value="-"></td>

               <td></td>

               <td></td>

             </tr>

             <tr>

               <td><b>Y<sub>2</sub>:</b></td>

               <td><input type="text" id="y2" value="-"></td>

               <td></td>

               <td></td>

             </tr>

           </tbody>

         </table>

     </div>

 </body>

 </html>

四 . 如果需要多个尺寸的预览窗口 ( 比如 100px * 100px , 60px * 60px , 30px * 30px  )，则可以设置多种缩放比例：

var scaleX = 100 / selection.width;

var scaleY = 100 / selection.height;

var scale2X = 60 / selection.width;

var scale2Y = 60 / selection.height;

var scale3X = 30 / selection.width;

var scale3Y = 30 / selection.height;

然后 html 和 css 分别设置每个窗口即可：

五. 重新选择选区

html 增加：

<!-- 重置选区 -->

<input type="button" id="reselect" value="重新选择" />

js $(function(){}) 中增加：

//重新选择

$("#reselect").click(function(){

        $('#photo').data('imgAreaSelect').remove();

        $('#photo').removeData('imgAreaSelect');

        $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });

});

如图：

六 . 此插件的选区预览图只能在确定长宽比的情况下正常预览，在截取任意尺寸的选区时将得不到正确比例的预览图，如果要实现任意长宽比的选区都能正常显示，可以修改代码：

预览图部分 html：

<!-- 选区预览图 -->

<div id="preview" style="display:none; overflow: hidden;">

    <img style="position: relative;">

</div>

初始的预览图外围 div 设置了 display:none

js 的 preview() 函数修改如下：

 function preview(img, selection) {

         if (!selection.width || !selection.height)

             return;

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

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

              marginTop: -Math.round(selection.y1)

         });

         $("#preview").css({"width":selection.width,"height":selection.height}).show();

         $('#x1').val(selection.x1);

         $('#y1').val(selection.y1);

         $('#x2').val(selection.x2);

         $('#y2').val(selection.y2);

         $('#w').val(selection.width);

         $('#h').val(selection.height);

 }

把预览图尺寸等比缩放的语句删除，预览图的上边距和左边距分别是选区左上角的横纵坐标，然后设置预览图外围 div 的宽度和高度直接设置为选区的宽度和高度并且显示，此时并不固定比例的选区的预览图也能正常预览，如图：

此时的完整 demo.html:

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>imgAreaSelect demo1</title>

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

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

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

   <script type="text/javascript">

     function preview(img, selection) {

         if (!selection.width || !selection.height)

             return;

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

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

              marginTop: -Math.round(selection.y1)

         });

         $("#preview").css({"width":selection.width,"height":selection.height}).show();

         $('#x1').val(selection.x1);

         $('#y1').val(selection.y1);

         $('#x2').val(selection.x2);

         $('#y2').val(selection.y2);

         $('#w').val(selection.width);

         $('#h').val(selection.height);

     }

     $(function () {

         //onSelectChange: preview 使用缩略图

         //选区宽高比为1:1

         //$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });

         //选区最大宽度200，最大高度150

         //$('#photo').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true, fadeSpeed: 200, onSelectChange: preview });

         //选区的起点和终点初始坐标

         //$('#photo').imgAreaSelect({ x1: 116, y1: 77, x2: 276, y2: 237, aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });

         //任意尺寸的选区

         $('#photo').imgAreaSelect({ handles: true, fadeSpeed: 200, onSelectChange: preview });

         //缩略图的图片

         $("#preview img").attr("src",$("#photo").attr("src"));

     });

 </script>

 </head>

 <body>

     <div id="container">

         <!-- 原图 -->

         <div>

             <img id="photo" src="data:images/pic3.jpg"/>

         </div>

         <!-- 选区预览图 -->

         <div id="preview" style="display:none; overflow: hidden;">

             <img style="position: relative;">

         </div>

         <!-- 信息 -->

         <table style="margin-top: 1em;">

           <thead>

             <tr>

               <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">

                 坐标

               </th>

               <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">

                 尺寸

               </th>

             </tr>

           </thead>

           <tbody>

             <tr>

               <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>

                   <td style="width: 30%;"><input type="text" id="x1" value="-"></td>

                   <td style="width: 20%;"><b>Width:</b></td>

                 <td><input type="text" value="-" id="w"></td>

             </tr>

             <tr>

               <td><b>Y<sub>1</sub>:</b></td>

               <td><input type="text" id="y1" value="-"></td>

               <td><b>Height:</b></td>

               <td><input type="text" id="h" value="-"></td>

             </tr>

             <tr>

               <td><b>X<sub>2</sub>:</b></td>

               <td><input type="text" id="x2" value="-"></td>

               <td></td>

               <td></td>

             </tr>

             <tr>

               <td><b>Y<sub>2</sub>:</b></td>

               <td><input type="text" id="y2" value="-"></td>

               <td></td>

               <td></td>

             </tr>

           </tbody>

         </table>

     </div>

 </body>

 </html>

此插件只是用 jQuery 获取到了选区的各点坐标，要真正实现剪裁功能要把坐标值传给 PHP 文件进行图片剪裁处理。

附：demo 下载地址。

其他关于此插件的教程可以点击：http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html

基于此插件的模块还可见：主页：PHP & jQuery image upload and crop，demo 自带上传、剪裁和保存功能。

jQuery 图片剪裁插件使用之 imgAreaSelect的更多相关文章

  1. jQuery 图片剪裁插件初探之 Jcrop

    主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...

  2. jQuery图片剪裁插件Cropper.js的使用

    插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css" ...

  3. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  4. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  5. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

  6. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  7. Croppic – 免费开源的 jQuery 图片裁剪插件

    Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData  对 ...

  8. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  9. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

随机推荐

  1. linux 创建连接命令 ln -s 软链接

    这是linux中一个非常重要命令,请大家一定要熟悉.它的功能是为某一个文件在另外一个位置建立一个同不的链接,这个命令最常用的参数是-s, 具体用法是:ln -s 源文件 目标文件. 当 我们需要在不同 ...

  2. grep -C n "匹配字符串" 匹配字符串上下N行

    [root@xxxxx ~]# grep -C 'ip_whitelist' /etc/gitlab/gitlab.rb # 'PATH' => "/opt/gitlab/bin:/o ...

  3. 分布式系统唯一ID生成方案汇总

    系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,也常常为这个问题而纠结.生成ID的方法有很多,适应不同的场景.需求以及性能要求.所以有些比较复杂的系统会有多个ID生成的策略.下面就介绍一些常见 ...

  4. 【Ubuntu日常技巧】VirtualBox多网卡路由配置，保障虚拟机连接上外网

    [背景]: 配置Ubuntu 虚拟机双网卡,一个是Host-Only网络,一个是桥接网络.当在虚拟机中同时连接到两个网络后,虚拟机能够ping通内部网络,不能ping通外部网络,如www.baidu. ...

  5. .net学习之类与对象、new关键字、构造函数、常量和只读变量、枚举、结构、垃圾回收、静态成员、静态类等

    1.类与对象的关系类是对一类事务的统称,是抽象的,不能拿来直接使用,比如汽车,没有具体指哪一辆汽车对象是一个具体存在的,看的见,摸得着的,可以拿来直接使用,比如我家的那辆刚刚买的新汽车,就是具体的对象 ...

  6. ava中Class.forName的作用浅谈

    转自:http://www.jb51.net/article/42648.htm Class.forName(xxx.xx.xx) 返回的是一个类 一.首先你要明白在java里面任何class都要装载 ...

  7. C语言字符串比较（转）

    #include <string.h>char s1[10],s2[10]; ... if(strcmp(s1,s2)==0) printf("两字符串相等\n"); ...

  8. sql2005-数据库备份方案 (转载)

    sql2005数据库备份一般情况分为二种:一是手工备份.二是自动备份.以下是二种方法的步骤: 一.手工备份 打开数据库,选择要备份数据库,右键选择[任务]->[备份],打开备份数据库页面,在[源 ...

  9. 输入框提示文字js

    <input style="margin-right: 0px; padding-right: 0px;" class="text" required=& ...

  10. include、include_once与require、require_once区别

    include与require的区别 include在引入不存文件时产生一个警告且脚本还会继续执行,而require则会导致一个致命性错误且脚本停止执行. <?php include 'no.p ...