主页：http://deepliquid.com/content/Jcrop.html

官方下载地址：http://deepliquid.com/content/Jcrop_Download.html

下载包中除了 CSS 文件夹和 js 文件夹外还提供了几款 demo：

1. non-image.html 不包含图像的任意 div 或 canvas 的剪裁方式：

2.styling.html

点击按钮改变样式：提供了 3 种可以选择的遮罩色、透明度和选区边框样式 jcrop-light ( bgcolor:#fff opacity:0.5 ) , jcrop-dark ( bgcolor:#000 opacity:0.4 ) , normal ( bgcolor:#000 opacity:0.6 )

3.tutorial1.html

Jcrop 的默认设置，只能图像上画裁剪框：

原图的 html 部分为：

<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />

此时在 js 中使用：

<script type="text/javascript">

  jQuery(function($){

    // How easy is this??

    $('#target').Jcrop();

  });

</script>

就可以显示默认的最简单的 demo 的效果。

4. tutorial2.html

基本事件处理事件： 使用 Jcrop 的 onchange 事件，实时更新显示左上、右下坐标值和选区宽高值，可以把这些值传递给后端程序进行处理

5.tutorial3.html

使用 Jcrop 的 onchange 事件，固定选区长宽比例并显示预览图，可以使用这种方法创建缩略图或者生成头像

预览图的显示机制和 imgAreaSelect 类似，见 line：42

 function updatePreview(c)

    {

      if (parseInt(c.w) > 0)

      {

        var rx = xsize / c.w;

        var ry = ysize / c.h;

        $pimg.css({

          width: Math.round(rx * boundx) + 'px',

          height: Math.round(ry * boundy) + 'px',

          marginLeft: '-' + Math.round(rx * c.x) + 'px',

          marginTop: '-' + Math.round(ry * c.y) + 'px'

        });

      }

  };

参数 c 是选区，c.w 代表选区的宽，c.h 代表选区的高；xsize 和 ysize 分别是预览窗口的宽和高；缩放比为 rx 与 ry 分别等于预览窗口的宽和高除以选区的宽和高；boundx 是原图的宽，boundy 是原图的高，见 jquery_Jcrop.js line:328:

  var boundx = $img.width(),

      boundy = $img.height(),

最后呈现在预览窗口中预览图的宽度等于缩放比乘以原图的宽高，这个处理和  imgAreaSelect 插件时一致的。

如果要改变选区的宽高比，只需在 demo html 中改变 line：91 #preview-pane .preview-container 的宽度和高度即改变预览窗口的宽度和高度，同时选区的宽高比也随着预览窗口的改变发生改变并和预览窗口宽高比一致。

图示预览图的宽度和高度为：

#preview-pane .preview-container {

  width: 250px;

  height: 170px;

  overflow: hidden;

}

修改为：

#preview-pane .preview-container {

  width: 220px;

  height: 220px;

  overflow: hidden;

}

如果需要不限制预览窗口的尺寸，预览图不发生缩放，和选区尺寸保持一致 ( 这种情况比较少 )，可以在 demo：tutorial1.html 中增加预览窗口的代码:

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <title>Hello World | Jcrop Demo</title>

   <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

 <script src="../js/jquery.min.js"></script>

 <script src="../js/jquery.Jcrop.js"></script>

 <script type="text/javascript">

     jQuery(function($){

         // How easy is this??

         $('#target').Jcrop({

             onChange:showCoords,

             onSelect:showCoords

         });

     });

     function showCoords(c){

         $('#preview-pane').css({"backgroundPosition":"-"+c.x+"px -"+c.y+"px","width":c.w,"height":c.h});

     };

 </script>

 <link rel="stylesheet" href="demo_files/main.css" type="text/css" />

 <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

 <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />

 <style>

 #preview-pane{background:url(demo_files/sago.jpg)}

 </style>

 </head>

 <body>

     <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />

     <div id="preview-pane"></div>

 </body>

 </html>

如图：

6.tutorial4.html

使用 animateTo API 进行各种动画和过渡的选区变换、背景透明度和背景颜色的过渡转变，很炫

颜色过渡需要 jQuery Color Animations 插件的支持，否则颜色不会有过渡效果。

这个演示还需要使用 outerImage 选项定义另外的图像。

use experimental shader ： 使用实现性的遮罩

7.tutorial5.html API Demo

翻译过来的界面( 来自：http://code.ciaoca.com/jquery/jcrop/demo/api.html )：

demo 文件夹中还提供了 crop.php，把选取的图片真正剪裁出来。

更多内容：官方文档

中文文档

jQuery 图片剪裁插件初探之 Jcrop的更多相关文章

  1. jQuery 图片剪裁插件使用之 imgAreaSelect

    插件主页:http://odyniec.net/projects/imgareaselect/ 官方网站上说明支持的浏览器:The plugin works in all major browsers ...

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

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

  3. jQuery 图片裁剪插件 Jcrop

    Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. BaseActivity与BaseFragment的封装

    这篇博客主要是从BaseActivity与BaseFragment的封装开始,总结我们在实战开发中关于Fragment的注意事项以及心得体会. 先看以下效果图: 这里模拟的是用户登录模块,你可能会说, ...

  2. ASP.NET MVC 3 使用Model自定义验证的样式

    1.修改jquery.validate.unobtrusive.js 将onError方法修改 //修改的部分 //////////////////////////////////////////// ...

  3. MVC @helper （转载）

    转载地址:http://gaoling386.blog.163.com/blog/static/5404602420130595842894/ ASP.NET MVC 3支持一项名为“Razor”的新 ...

  4. ASP.NET 数据库访问通用工具

    在工作中,有很多项目已上线后,很多项目的数据库服务器都不会对外开放的,外网想直接访问客户数据库服务器时,可能会出现困难. 这时就需要一个可以查询,更新数据库操作的页面了: 本来用sql语句直接操作数据 ...

  5. Effective C++笔记：设计与声明

    条款18:让接口容易被正确使用,不易被误用 1,好的接口很容易被正确使用,不容易被误用.你应该在你的所有接口中努力达成这些性质. 2,“促进正使用”的办法包括接口的一致性,以及与内置类型的行为兼容. ...

  6. Myeclipse 60.激活

    Myeclipse 用来开发java web应用是十分的方便的,不过如果没有激活的话,用起来感觉会非常不爽. 当然,个人来说还是非常支持正版的,也鼓励大家支持正版. 好了,下面介绍一下怎么破解Myec ...

  7. HTML-Canvas02

    文字对齐方式 : 水平对齐 //是用 textAlign 属性设置水平对齐方式(默认坐标点) ctx.textAlign = "start"; ctx.font = "3 ...

  8. Android 2D游戏引擎AndEngine配置环境

    Android 2D游戏引擎AndEngine配置环境 1.2  配置环境 在任何编程中,都需要一些软件或者硬件的支持.否则,没有硬件软件是不可能存在的,而想要编写对应语言的的程序,这需要对应语言库和 ...

  9. 原生JS代码实现一个Ajax异步请求

    异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...

  10. POJ3162 Walking Race（树形DP+尺取法+单调队列）

    题目大概是给一棵n个结点边带权的树,记结点i到其他结点最远距离为d[i],问d数组构成的这个序列中满足其中最大值与最小值的差不超过m的连续子序列最长是多长. 各个结点到其他结点的最远距离可以用树形DP ...