cropper简单且功能强大的图片剪裁jQuery插件

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

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

安装

可以通过Bower或NPM来安装该插件。

1 2	`bower install cropper` `npm install cropper`

使用方法

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

<script src="/path/to/jquery.js"></script>

<link href="/path/to/cropper.css" rel="stylesheet">

<script src="/path/to/cropper.js"></script>

HTML结构

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

<div class="container">

<img src="picture.jpg">

</div>

调用插件

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

$('.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，默认值null。build.cropper事件的简写方式。

built：类型：Function，默认值null。built.cropper事件的简写方式。

dragstart：类型：Function，默认值null。dragstart.cropper事件的简写方式。

dragmove：类型：Function，默认值null。dragmove.cropper事件的简写方式。

dragend：类型：Function，默认值null。dragend.cropper事件的简写方式。

zoomin：类型：Function，默认值null。zoomin.cropper事件的简写方式。

zoomout：类型：Function，默认值null。zoomout.cropper事件的简写方式。

cropper简单且功能强大的图片剪裁jQuery插件相关推荐

html图片自动剪裁,jQuery简单且功能强大的图片剪裁插件
cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. croppe ...
html查看器查看图片,jQuery功能强大的图片查看器插件
viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备,支持键盘控 ...
使用 Proto 构建了一个简单但功能强大的 lambda 库的测试程序
使用 Proto 构建了一个简单但功能强大的 lambda 库的测试程序实现功能 C++实现代码实现功能使用 Proto 构建了一个简单但功能强大的 lambda 库的测试程序 C++实现代码 ...
搜题接口后台简单便捷功能强大
搜题接口后台简单便捷功能强大本平台优点: 多题库查题.独立后台.响应速度快.全网平台可查.功能最全! 1.想要给自己的公众号获得查题接口,只需要两步! 2.题库: 查题校园题库:查题校园题库后台( ...
功能强大的文件上传插件带上传进度-WebUploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个以HTML5/FLASH构建的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用老 ...
手势控制幻灯片播放html,FlexSlider|功能强大的响应式jQuery幻灯片插件
FlexSlider是一款功能强大的响应式jQuery幻灯片插件.该幻灯片插件可以制作为带缩略图模式,旋转木马模式等.它可以自适应屏幕大小,并可以制作多种幻灯片过渡特效.它的兼容性强,可以兼容IE7+ ...
功能强大的 Javascript 动画库插件
本期介绍一个前端动画插件anime.js,anime.js 是一款功能强大的 Javascript 动画库插件,可以和 CSS3 属性,SVG,DOM 元素和 JS 对象一起工作,制作出各种高性能,平 ...
Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器 ...
分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
为什么80%的码农都做不了架构师?>>> 日期:2012-5-6 来源:GBin1.com 在线演示本地下载触摸设备越来越流行了,很多互联网用户都使用ipad等平板电脑 ...

cropper简单且功能强大的图片剪裁jQuery插件

cropper简单且功能强大的图片剪裁jQuery插件相关推荐

最新文章

热门文章