简要教程

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. 【转载】用Ionic开发hybrid APP

    使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势.而且私以为在目前激烈而又变化快速的移动 ...

  2. 谈谈.Net技术面试

    1.引子 最近一直在负责.net(B/S方向)技术面试相关的工作,前前后后面试了不少人,但是通过率较低,大概只有20%左右:有颇多感慨. 最近也一直比较困惑,原因究竟是什么? 是我们要求太高,应聘者本 ...

  3. onBackPressed

    onBackPressed()此为进行返回当前的activity 看源码

  4. NSMutableAttributedString的使用

    1.设置字符串中数字字符串的颜色: // 设置字符串中数字的颜色 - (void)setTextColor:(UILabel *)label FontNumber:(id)font AndRange: ...

  5. 正确获得android设备的IP地址

    网上此类获得android设备IP地址相关的文章有不少,有一篇是比较通用的,但有一个问题:有些设备默认的是IPv6的地址,那段代码获得的就是IPv6的地址.但这显然不是我们想要的,我们需要的是IPv4 ...

  6. java算法(一)

    最近在看各种经典算法,自己写起来: 一.判断素数问题: 知识点:素数即为质数,一个数n若不是质数则一定在2-n/2之间内有因数. package JingDian; public class sush ...

  7. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

  8. PythonDay01

    >注释 >>当行注视:# 被注释内容 >>多行注释:""" 被注释内容 """ >执行脚本传入参数 &g ...

  9. ServletContext的用途

    安装在一个服务器中的一个特定URL名字空间(比如,/myapplication)下的所有Servlet,JSP,JavaBean等Web部件的集合构成了一个Web的应用,每一个Web应用(同一JVM) ...

  10. NAS4Free 安装配置(二)系统安装

    NAS4Free系统安装 看一看BIOS设置 开机按DEL进BIOS 改日期时间 这里可以设置RAID,因为ZFS的RAID功能更好,所以我们在这里不配置RAID 制作LiveUSB 用软件(USB ...