简要教程

cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用。

cropper提供了大量的参数、方法和事件供图片的剪裁操作。

安装

可以通过BowerNPM来安装该插件。

1
2
bower install cropper
npm install cropper               

使用方法

使用该图片剪裁插件首先要引入必要的js和css文件。

1
2
3
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>               
HTML结构

可以将图片或canvas直接包裹到一个块级元素中。

1
2
3
4
<!-- Wrap the image or canvas with a block element -->
<div class="container">
  <img src="picture.jpg">
</div>               
调用插件

可以使用$.fn.cropper方法来初始化该图片剪裁插件。

1
2
3
4
5
6
$('.container > img').cropper({
  aspectRatio: 16 / 9,
  crop: function(data) {
    // Output the result data for cropping image.
  }
});               

注意事项

  • 注意:剪裁区域的尺寸继承自图片的父容器(包裹容器),所以要确保包裹图片的是一个可见的块级元素。
  • 输出的剪裁数据基于原始的图片尺寸,你可以使用这些数据直接剪裁图片。
  • 如果你要使用跨源图片来作为剪裁图片,请确保你的浏览器支持HTML5 CORS settings attributes,并且你的图片服务器支持Access-Control-Allow-Origin属性。

配置参数

你可以通过$().cropper(options)方法来设置参数。如果你想改变全局默认参数,可以使用$.fn.cropper.setDefaults(options)方法。

  • aspectRatio:类型:Number,默认值NaN。设置剪裁容器的比例。
  • crop:类型:Function,默认值null。当改变剪裁容器或图片时的事件函数。
  • preview:类型:String(jQuery选择器),默认值''。添加额外的元素(容器)的预览。注意:
    • 最大宽度是剪裁容器的初始化宽度
    • 最大高度是剪裁容器的初始化高度
    • 如果你设置了aspectRatio参数,确保预览容器具有相同的比例
  • strict:类型:Boolean,默认值true。在strict模式中,canvas不能小于容器,剪裁容器不能再canvas之外。
  • responsive:类型:Boolean,默认值true。是否在窗口尺寸改变的时候重置cropper。
  • checkImageOrigin:类型:Boolean,默认值true。默认情况下,插件会检测图片的源,如果是跨域图片,图片元素会被添加crossOrigin class,并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载,以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳,及图片的重新加载。
  • background:类型:Boolean,默认值true。是否在容器上显示网格背景。
  • modal:类型:Boolean,默认值true。是否在剪裁框上显示黑色的模态窗口。
  • guides:类型:Boolean,默认值true。是否在剪裁框上显示虚线。
  • highlight:类型:Boolean,默认值true。是否在剪裁框上显示白色的模态窗口。
  • autoCrop:类型:Boolean,默认值true。是否在初始化时允许自动剪裁图片。
  • autoCropArea:类型:Number,默认值0.8(图片的80%)。0-1之间的数值,定义自动剪裁区域的大小。
  • dragCrop:类型:Boolean,默认值true。是否允许移除当前的剪裁框,并通过拖动来新建一个剪裁框区域。
  • movable:类型:Boolean,默认值true。是否允许移动剪裁框。
  • resizable:类型:Boolean,默认值true。是否允许改变剪裁框的大小。
  • zoomable:类型:Boolean,默认值true。是否允许放大缩小图片。
  • mouseWheelZoom:类型:Boolean,默认值true。是否允许通过鼠标滚轮来缩放图片。
  • touchDragZoom:类型:Boolean,默认值true。是否允许通过触摸移动来缩放图片。
  • rotatable:类型:Boolean,默认值true。是否允许旋转图片。
  • minContainerWidth:类型:Number,默认值200。容器的最小宽度。
  • minContainerHeight:类型:Number,默认值100。容器的最小高度。
  • minCanvasWidth:类型:Number,默认值0。canvas 的最小宽度(image wrapper)。
  • minCanvasHeight:类型:Number,默认值0。canvas 的最小高度(image wrapper)。
  • build:类型:Function,默认值nullbuild.cropper事件的简写方式。
  • built:类型:Function,默认值nullbuilt.cropper事件的简写方式。
  • dragstart:类型:Function,默认值nulldragstart.cropper事件的简写方式。
  • dragmove:类型:Function,默认值nulldragmove.cropper事件的简写方式。
  • dragend:类型:Function,默认值nulldragend.cropper事件的简写方式。
  • zoomin:类型:Function,默认值nullzoomin.cropper事件的简写方式。
  • zoomout:类型:Function,默认值nullzoomout.cropper事件的简写方式。

方法

因为图片是异步加载的,所以你需要在built之后才能调用下面的方法,setAspectRatioreplacedestroy方法例外。

1
2
3
4
5
$().cropper({
  built: function () {
    $().cropper('method', argument1, , argument2, ..., argumentN)
  }
}               
  • move(offsetX, offsetY):

    • offsetX:类型:Number,水平方向上移动的大小,单位像素。
    • offsetY:类型:Number,垂直方向上移动的大小,单位像素。

    移动一幅图片:

    1
    2
    $().cropper('move', 1, 0)
    $().cropper('move', 0, -1)
  • zoom(ratio):

    ratio

    • 类型:Number
    • Zoom in:需要一个正数(ratio > 0)
    • Zoom out:需要一个负数(ratio < 0)

    缩放一幅图片:

    1
    2
    $().cropper('zoom', 0.1)
    $().cropper('zoom', -0.1)
  • rotate(degree):

    ratio

    • 类型:Number
    • Rotate right:需要一个正数(degree > 0)
    • Rotate left:需要一个负数(degree < 0)

    旋转一幅图片,需要CSS3 Transforms3d的支持(IE10+):

    1
    2
    $().cropper('rotate', 90)
    $().cropper('rotate', -90)
  • enable():使cropper可用。
  • disable():冻结cropper。
  • reset():重置剪裁区域的图片到初始状态。
  • clear():清空剪裁区域。
  • replace(url):

    url

    • 类型:String
    • 一个新的图片URL

    替换图片的URL重建cropper。

  • getData():

    返回值:

    • 类型:Object
    • 属性:
      • x:剪裁区域左侧的偏移。
      • y:剪裁区域距上部的偏移。
      • width:剪裁区域的宽度。
      • height:剪裁区域的高度。
      • rotate:图片的旋转角度。

    看下图演示从原始图片中返回的剪裁区域数据。

  • getContainerData():

    返回值:

    • 类型:Object
    • 属性:
      • width:容器的当前宽度。
      • height:容器的当前高度。

    输出容器尺寸数据。

  • getImageData():

    返回值:

    • 类型:Object
    • 属性:
      • left:图片的左侧偏移。
      • top:图片的上部偏移。
      • width:图片的宽度。
      • height:图片的高度。

    输出图片的位置和尺寸大小。

  • getCanvasData():

    返回值:

    • 类型:Object
    • 属性:
      • left:canvas的左侧偏移。
      • top:canvas的上部偏移。
      • width:canvas的宽度。
      • height:canvas的高度。

    输出canvas(图片容器)的位置和尺寸大小。

  • setCanvasData(data):

    返回值:

    • 类型:Object
    • 属性:
      • left:canvas的距离左侧新的偏移。
      • top:canvas的距离上部新的偏移。
      • width:canvas新的宽度。
      • height:canvas新的高度。

    改变canvas(图片容器)的位置和尺寸大小。

  • getCropBoxData():

    返回值:

    • 类型:Object
    • 属性:
      • left:剪裁区域距离左侧的偏移。
      • top:剪裁区域距离上部的偏移。
      • width:剪裁区域的宽度。
      • height:剪裁区域的高度。

    输出剪裁区域的位置和尺寸大小。

  • setCropBoxData(data):

    返回值:

    • 类型:Object
    • 属性:
      • left:剪裁区域距离左侧新的偏移。
      • top:剪裁区域距离上部新的偏移。
      • width:剪裁区域新的宽度。
      • height:剪裁区域新的高度。

    改变剪裁区域的位置和尺寸大小。

  • getCroppedCanvas([options]):

    参数(默认值):

    • 类型:Object
    • 属性:
      • width:输出的canvas目标宽度。
      • height:输出的canvas目标高度。
      • fillColor:canvas中填充的颜色。

    返回值:

    • 类型:HTMLCanvasElement
    • 一个画有剪裁图片的canvas。

    浏览器支持:

    获取canvas绘制的剪裁图像。

    在这之后,你可以直接将canvas作为图片显示,或使用canvas.toDataURL方法获取图像的数据链接,或者使用canvas.toBlob方法获取一个blob,并通过FormData方法将它更新到服务器上(如果浏览器支持这些API)。

    1
    2
    3
    4
    5
    $().cropper('getCroppedCanvas')
    $().cropper('getCroppedCanvas', {
      width: 160,
      height: 90
    });
  • setAspectRatio(aspectRatio):

    aspectRatio

    • 类型:Number
    • 需要一个正整数。

    改变剪裁区域的比例。

  • setDragMode([mode]):

    mode(可选项):

    • 类型:String
    • 默认值:''
    • 选项:'crop''move'

    改变拖拽模式。提示:你可以通过双击来改变"crop" 和 "move"模式。

事件

  • build.cropper:当cropper对象开始加载图片的时候触发该事件。
  • built.cropper:当cropper对象构建完成时触发该事件。
  • dragstart.cropper:

    event.dragType

    • "crop":创建一个新的剪裁区域。
    • "move":移动canvas。
    • "zoom":通过触摸移动来缩放canvas。
    • "e":调整剪裁区域东边的尺寸大小。
    • "w":调整剪裁区域西边的尺寸大小。
    • "s":调整剪裁区域南边的尺寸大小。
    • "n":调整剪裁区域北边的尺寸大小。
    • "se":调整剪裁区域东南边的尺寸大小。
    • "sw":调整剪裁区域西南边的尺寸大小。
    • "ne":调整剪裁区域东北边的尺寸大小。
    • "nw":调整剪裁区域西北边的尺寸大小。
    • "all":移动剪裁区域。

    该事件在剪裁区域发生改变时触发。

    相关的原始事件:mousedowntouchstart

    1
    2
    3
    4
    5
    $('img').on('dragstart.cropper', function (e) {
      console.log(e.type); // dragstart
      console.log(e.namespace); // cropper
      console.log(e.dragType); // ...
    });
  • dragmove.cropper:

    event.dragType:和dragstart.cropper相同。

    当剪裁区域发生改变时触发。

    相关的原始事件:mousemovetouchmove

  • dragend.cropper:

    event.dragType:和dragstart.cropper相同。

    当剪裁区域改变结束时触发。

    相关的原始事件:mouseupmouseleavetouchendtouchleavetouchcancel

  • zoomin.cropper:当cropper对象开始放大canvas时触发。
  • zoomout.cropper:当cropper对象开始缩小canvas时触发。
  • No conflict:如果你使用了相同名称空间的其它插件,可以通过$.fn.cropper.noConflict方法来修改名称空间。
    1
    2
    3
    4
    5
    6
    <script src="other-plugin.js"></script>
    <script src="cropper.js"></script>
    <script>
      $.fn.cropper.noConflict();
      // Code that uses other plugin's "$().cropper" can follow here.
    </script>

浏览器兼容

  • Chrome 38+
  • Firefox 33+
  • Internet Explorer 8+
  • Opera 25+
  • Safari 5.1+

作为jQuery插件,你还需要了解浏览器对jQuery的支持

本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Image-Effects/201504211716.html

插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。的更多相关文章

  1. 图片延迟加载jquery插件imgLazyLoading

    实现了图片延迟加载功能,插件代码非常简洁,且每个功能都把注释写得非常详细,适合网友们学习,好好利用哦 引入图片延迟加载Jquery插件文件后,页面使用代码如下: <script type=&qu ...

  2. 延迟加载图片的 jQuery 插件:Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  3. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  4. Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件!

    源:Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件! 2014年02月06日发布控件的重要更新版本: Victor 串口控件 1.5.0.2 版本 (包 ...

  5. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  6. 分享10款功能强大的HTML5/CSS3应用插件

    1.纯CSS3美化Checkbox和Radiobox按钮 外观很时尚 利用CSS3我们可以打造非常具有个性化的用户表单,今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框.CSS ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

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

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

随机推荐

  1. 区分IE版本的三个方法

    我们通常使用IE条件判断语言来处理IE的CSS问题,但其实还是有其他的一些方法来处理IE的CSS bug的. 一.IE条件判断语句 IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, I ...

  2. Jquery想说爱你不容易

    JQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作.由John Resig在2006年1月的BarCamp NYC上发布第一个版本.目前是由 Dave M ...

  3. JSP内置对象---request 对象

    request.jsp: <%@ page language="java" import="java.util.*" contentType=" ...

  4. MySQL 运行环境建议规范

    一.操作系统环境 操作系统版本选择 CentOS/RHRL/ORACLE Linux 5.x/6.x x86_64 发行版 建议磁盘分区规则 MySQL 运行环境建议规范 挂载点 大小 分区类型 分区 ...

  5. 那些Android中的性能优化

    性能优化是一个大的范畴,如果有人问你在Android中如何做性能优化的,也许都不知道从哪开始说起. 首先要明白的是,为什么我们的App需要优化,最显而易见的时刻:用户say,什么狗屎,刷这么久都没反应 ...

  6. MFC学习笔记(一)向模态对话框传递数据

    声明构造函数为2个参数,具有默认参数的参数须放在后面. CDialogDimmer::CDialogDimmer(CString name,CWnd* pParent /*=NULL*/) : CDi ...

  7. Reading Notes of Acceptance Test Engineering Guide

    The Acceptance Test Engineering Guide will provide guidance for technology stakeholders (developers, ...

  8. 在使用Myeclipse时,用Tomcat添加部署项目的时候报错,或启动tomcat报错

    the selected server is enabled,but is not configured properly.deployment to it will not be permitted ...

  9. js 数组的判断

    <javascript语言精粹>中的 var is_array = function(value){ return value && //判断值是否为真,不接受null和其 ...

  10. jQuery-webcam(.NET)实现WEB摄像头监控

    jQuery-webcam是一个非常好用的摄像头监控工具,DEMO可官方下载地址http://www.xarg.org/project/jquery-webcam-plugin/ 1.下载解压后,jq ...