插件主页：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 文件

  1.   <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  2.   <script type="text/javascript" src="scripts/jquery.min.js"></script>
  3.   <script type="text/javascript" src="scripts/jquery.imgareaselect.js"></script>

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

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

  1. <!-- 原图 -->
  2. <div>
  3.      <img id="photo" src="data:images/pic3.jpg"/>
  4. </div>
  5.  
  6. <!-- 选区预览图 -->
  7. <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
  8.      <img style="position: relative;">
  9. </div>

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

  1. <table style="margin-top: 1em;">
  2.           <thead>
  3.             <tr>
  4.               <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
  5.                 坐标
  6.               </th>
  7.               <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
  8.                 尺寸
  9.               </th>
  10.             </tr>
  11.           </thead>
  12.           <tbody>
  13.             <tr>
  14.               <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
  15.                   <td style="width: 30%;"><input type="text" id="x1" value="-"></td>
  16.                   <td style="width: 20%;"><b>Width:</b></td>
  17.                 <td><input type="text" value="-" id="w"></td>
  18.             </tr>
  19.             <tr>
  20.               <td><b>Y<sub>1</sub>:</b></td>
  21.               <td><input type="text" id="y1" value="-"></td>
  22.               <td><b>Height:</b></td>
  23.               <td><input type="text" id="h" value="-"></td>
  24.             </tr>
  25.             <tr>
  26.               <td><b>X<sub>2</sub>:</b></td>
  27.               <td><input type="text" id="x2" value="-"></td>
  28.               <td></td>
  29.               <td></td>
  30.             </tr>
  31.             <tr>
  32.               <td><b>Y<sub>2</sub>:</b></td>
  33.               <td><input type="text" id="y2" value="-"></td>
  34.               <td></td>
  35.               <td></td>
  36.             </tr>
  37.           </tbody>
  38. </table>

js 设置：

  1.  <script type="text/javascript">
  2.  
  3.      function preview(img, selection) {
  4.          if (!selection.width || !selection.height)
  5.              return;
  6.  
  7.          //预览图尺寸等比例缩放，以100为临界，当在原图中选定的区域大于100px时，预览图中图像缩小；当在原图中选定的区域小于100px时，预览图中图像放大；selection为选区
  8.          var scaleX = 100 / selection.width;
  9.          var scaleY = 100 / selection.height;
  10.  
  11.          $('#preview img').css({
  12.              width: Math.round(scaleX * 400), //原图宽400
  13.              height: Math.round(scaleY * 300), //原图高300
  14.              marginLeft: -Math.round(scaleX * selection.x1),
  15.              marginTop: -Math.round(scaleY * selection.y1)
  16.          });
  17.  
  18.          $('#x1').val(selection.x1);
  19.          $('#y1').val(selection.y1);
  20.          $('#x2').val(selection.x2);
  21.          $('#y2').val(selection.y2);
  22.          $('#w').val(selection.width);
  23.          $('#h').val(selection.height);
  24.      }
  25.  
  26.      $(function () {
  27.  
  28.          //onSelectChange: preview 使用缩略图
  29.          //模式一.选区宽高比为1:1
  30.          //$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });
  31.  
  32.          //模式二.选区最大宽度200，最大高度150
  33.          //$('#photo').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true, fadeSpeed: 200, onSelectChange: preview });
  34.  
  35.          //模式三.选区的起点和终点初始坐标
  36.          //$('#photo').imgAreaSelect({ x1: 116, y1: 77, x2: 276, y2: 237, aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });
  37.  
  38.          //模式四.任意尺寸的选区
  39.          $('#photo').imgAreaSelect({ handles: true, fadeSpeed: 200, onSelectChange: preview });
  40.  
  41.          //缩略图的图片
  42.          $("#preview img").attr("src",$("#photo").attr("src"));
  43.      });
  44.  </script>

二. 预览图的成像原理：

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

  1. $('#preview img').css({
  2.         width: Math.round(scaleX * 400), //原图宽400
  3.         height: Math.round(scaleY * 300), //原图高300
  4.         marginLeft: -Math.round(scaleX * selection.x1),
  5.         marginTop: -Math.round(scaleY * selection.y1)
  6. });

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

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

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

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

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

4. 选取任意尺寸的选区

完整demo.html:

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>imgAreaSelect demo1</title>
  6.    <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  7.    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
  8.    <script type="text/javascript" src="scripts/jquery.imgareaselect.js"></script>
  9.  
  10.    <script type="text/javascript">
  11.  
  12.      function preview(img, selection) {
  13.          if (!selection.width || !selection.height)
  14.              return;
  15.  
  16.          //预览图尺寸等比例缩放，以100为临界，当在原图中选定的区域大于100px时，预览图中图像缩小；当在原图中选定的区域小于100px时，预览图中图像放大；
  17.          var scaleX = 100 / selection.width;
  18.          var scaleY = 100 / selection.height;
  19.  
  20.          $('#preview img').css({
  21.              width: Math.round(scaleX * 400), //原图宽400
  22.              height: Math.round(scaleY * 300), //原图高300
  23.              marginLeft: -Math.round(scaleX * selection.x1),
  24.              marginTop: -Math.round(scaleY * selection.y1)
  25.          });
  26.  
  27.          $('#x1').val(selection.x1);
  28.          $('#y1').val(selection.y1);
  29.          $('#x2').val(selection.x2);
  30.          $('#y2').val(selection.y2);
  31.          $('#w').val(selection.width);
  32.          $('#h').val(selection.height);
  33.      }
  34.  
  35.      $(function () {
  36.  
  37.          //onSelectChange: preview 使用缩略图
  38.          //选区宽高比为1:1
  39.          //$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });
  40.  
  41.          //选区最大宽度200，最大高度150
  42.          //$('#photo').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true, fadeSpeed: 200, onSelectChange: preview });
  43.  
  44.          //选区的起点和终点初始坐标
  45.          //$('#photo').imgAreaSelect({ x1: 116, y1: 77, x2: 276, y2: 237, aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });
  46.  
  47.          //任意尺寸的选区
  48.          $('#photo').imgAreaSelect({ handles: true, fadeSpeed: 200, onSelectChange: preview });
  49.  
  50.          //缩略图的图片
  51.          $("#preview img").attr("src",$("#photo").attr("src"));
  52.      });
  53.  </script>
  54.  </head>
  55.  
  56.  <body>
  57.  
  58.      <div id="container">
  59.  
  60.          <!-- 原图 -->
  61.          <div>
  62.              <img id="photo" src="data:images/pic3.jpg"/>
  63.          </div>
  64.  
  65.          <!-- 选区缩略图 -->
  66.          <div id="preview" style="width: 100px; height:100px; overflow: hidden;">
  67.              <img style="position: relative;">
  68.          </div>
  69.  
  70.          <!-- 信息 -->
  71.          <table style="margin-top: 1em;">
  72.            <thead>
  73.              <tr>
  74.                <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
  75.                  坐标
  76.                </th>
  77.                <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
  78.                  尺寸
  79.                </th>
  80.              </tr>
  81.            </thead>
  82.            <tbody>
  83.              <tr>
  84.                <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
  85.                    <td style="width: 30%;"><input type="text" id="x1" value="-"></td>
  86.                    <td style="width: 20%;"><b>Width:</b></td>
  87.                  <td><input type="text" value="-" id="w"></td>
  88.              </tr>
  89.              <tr>
  90.                <td><b>Y<sub>1</sub>:</b></td>
  91.                <td><input type="text" id="y1" value="-"></td>
  92.                <td><b>Height:</b></td>
  93.                <td><input type="text" id="h" value="-"></td>
  94.              </tr>
  95.              <tr>
  96.                <td><b>X<sub>2</sub>:</b></td>
  97.                <td><input type="text" id="x2" value="-"></td>
  98.                <td></td>
  99.                <td></td>
  100.              </tr>
  101.              <tr>
  102.                <td><b>Y<sub>2</sub>:</b></td>
  103.                <td><input type="text" id="y2" value="-"></td>
  104.                <td></td>
  105.                <td></td>
  106.              </tr>
  107.            </tbody>
  108.          </table>
  109.  
  110.      </div>
  111.  
  112.  </body>
  113.  </html>

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

  1. var scaleX = 100 / selection.width;
  2. var scaleY = 100 / selection.height;
  3.  
  4. var scale2X = 60 / selection.width;
  5. var scale2Y = 60 / selection.height;
  6.  
  7. var scale3X = 30 / selection.width;
  8. var scale3Y = 30 / selection.height;

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

五. 重新选择选区

html 增加：

  1. <!-- 重置选区 -->
  2. <input type="button" id="reselect" value="重新选择" />

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

  1. //重新选择
  2. $("#reselect").click(function(){
  3.  
  4.         $('#photo').data('imgAreaSelect').remove();
  5.         $('#photo').removeData('imgAreaSelect');
  6.         $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });
  7. });

如图：

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

预览图部分 html：

  1. <!-- 选区预览图 -->
  2. <div id="preview" style="display:none; overflow: hidden;">
  3.     <img style="position: relative;">
  4. </div>

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

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

  1.  function preview(img, selection) {
  2.          if (!selection.width || !selection.height)
  3.              return;
  4.  
  5.          $('#preview img').css({
  6.  
  7.               marginLeft: -Math.round(selection.x1),
  8.               marginTop: -Math.round(selection.y1)
  9.          });
  10.  
  11.          $("#preview").css({"width":selection.width,"height":selection.height}).show();
  12.  
  13.          $('#x1').val(selection.x1);
  14.          $('#y1').val(selection.y1);
  15.          $('#x2').val(selection.x2);
  16.          $('#y2').val(selection.y2);
  17.          $('#w').val(selection.width);
  18.          $('#h').val(selection.height);
  19.  }

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

此时的完整 demo.html:

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>imgAreaSelect demo1</title>
  6.    <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
  7.    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
  8.    <script type="text/javascript" src="scripts/jquery.imgareaselect.js"></script>
  9.  
  10.    <script type="text/javascript">
  11.  
  12.      function preview(img, selection) {
  13.          if (!selection.width || !selection.height)
  14.              return;
  15.  
  16.          $('#preview img').css({
  17.  
  18.               marginLeft: -Math.round(selection.x1),
  19.               marginTop: -Math.round(selection.y1)
  20.          });
  21.  
  22.          $("#preview").css({"width":selection.width,"height":selection.height}).show();
  23.  
  24.          $('#x1').val(selection.x1);
  25.          $('#y1').val(selection.y1);
  26.          $('#x2').val(selection.x2);
  27.          $('#y2').val(selection.y2);
  28.          $('#w').val(selection.width);
  29.          $('#h').val(selection.height);
  30.      }
  31.  
  32.      $(function () {
  33.  
  34.          //onSelectChange: preview 使用缩略图
  35.          //选区宽高比为1:1
  36.          //$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });
  37.  
  38.          //选区最大宽度200，最大高度150
  39.          //$('#photo').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true, fadeSpeed: 200, onSelectChange: preview });
  40.  
  41.          //选区的起点和终点初始坐标
  42.          //$('#photo').imgAreaSelect({ x1: 116, y1: 77, x2: 276, y2: 237, aspectRatio: '1:1', handles: true, fadeSpeed: 200, onSelectChange: preview });
  43.  
  44.          //任意尺寸的选区
  45.          $('#photo').imgAreaSelect({ handles: true, fadeSpeed: 200, onSelectChange: preview });
  46.  
  47.          //缩略图的图片
  48.          $("#preview img").attr("src",$("#photo").attr("src"));
  49.  
  50.      });
  51.  </script>
  52.  </head>
  53.  
  54.  <body>
  55.  
  56.      <div id="container">
  57.  
  58.          <!-- 原图 -->
  59.          <div>
  60.              <img id="photo" src="data:images/pic3.jpg"/>
  61.          </div>
  62.  
  63.          <!-- 选区预览图 -->
  64.          <div id="preview" style="display:none; overflow: hidden;">
  65.              <img style="position: relative;">
  66.          </div>
  67.  
  68.          <!-- 信息 -->
  69.          <table style="margin-top: 1em;">
  70.            <thead>
  71.              <tr>
  72.                <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
  73.                  坐标
  74.                </th>
  75.                <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
  76.                  尺寸
  77.                </th>
  78.              </tr>
  79.            </thead>
  80.            <tbody>
  81.              <tr>
  82.                <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
  83.                    <td style="width: 30%;"><input type="text" id="x1" value="-"></td>
  84.                    <td style="width: 20%;"><b>Width:</b></td>
  85.                  <td><input type="text" value="-" id="w"></td>
  86.              </tr>
  87.              <tr>
  88.                <td><b>Y<sub>1</sub>:</b></td>
  89.                <td><input type="text" id="y1" value="-"></td>
  90.                <td><b>Height:</b></td>
  91.                <td><input type="text" id="h" value="-"></td>
  92.              </tr>
  93.              <tr>
  94.                <td><b>X<sub>2</sub>:</b></td>
  95.                <td><input type="text" id="x2" value="-"></td>
  96.                <td></td>
  97.                <td></td>
  98.              </tr>
  99.              <tr>
  100.                <td><b>Y<sub>2</sub>:</b></td>
  101.                <td><input type="text" id="y2" value="-"></td>
  102.                <td></td>
  103.                <td></td>
  104.              </tr>
  105.            </tbody>
  106.          </table>
  107.  
  108.      </div>
  109.  
  110.  </body>
  111.  </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. 分类and分类延展

    1.Category简介 Category,又称为类别&类目&分类,是OC特有语法,在不修改原有类的基础上增加新的方法,一个庞大的类可以多人来分模块开发,有助于团队合作,或者对当前类方 ...

  2. MySQL Auto_Increment属性应用

        我们经常要用到唯一编号,以标识记录.在MySQL中可通过数据列的AUTO_INCREMENT属性来自动生成.MySQL支持多种数据表,每种数据表的自增属性都有差异,这里将介绍各种数据表里的数据 ...

  3. Linux下Gcc生成和使用静态库和动态库详解

    参考文章:http://blog.chinaunix.net/uid-23592843-id-223539.html 一.基本概念 1.1什么是库 在windows平台和linux平台下都大量存在着库 ...

  4. wp7 xml

    public class DynamicXMLNode : DynamicObject { XElement node; public DynamicXMLNode(XElement node) { ...

  5. Theano在CentOS 6 下的安装及GPU加速

    系统版本:Red Hat 4.4.6-4 一. 未联网情况下,选择本地安装. 首先安装theano的依赖库,包括:scipy-0.16.1numpy-1.9.2nose-1.3.7 (optional ...

  6. How to enable logging

    转自:https://www.chromium.org/for-testers/enable-logging How to enable logging To enable logging, laun ...

  7. 最短路(Bellman_Ford) POJ 3259 Wormholes

    题目传送门 /* 题意:一张有双方向连通和单方向连通的图,单方向的是负权值,问是否能回到过去(权值和为负) Bellman_Ford:循环n-1次松弛操作,再判断是否存在负权回路(因为如果有会一直减下 ...

  8. LightOJ1201 A Perfect Murder（树形DP）

    一道经典的树型DP入门题.dp[u][0/1]表示u点不选或选时以u为根的子树最多能选择的点数. 题目给的有向有环图可以看作森林,注意不是树,因为题目没有说图是连通的! #include<cst ...

  9. LightOJ1013 Love Calculator（DP）

    容易猜测到包含s1.s2序列的串的最短长度是LCS(s1,s2) + ( len(s1) - LCS(s1,s2) ) + ( len(s2) - LCS(s1,s2) ) ,即: len(s1)+l ...

  10. ISODATA算法

    ISODATA算法是在k-均值算法的基础上,增加对聚类结果的'合并'和'分裂'两个操作,并 设定算法运行控制参数的一种聚类算法. 全称:Iterative Selforganizing Data An ...