一个简单的 jQuery 图片裁剪插件----cropper

浏览器支持
Chrome (latest 2)
Firefox (latest 2)
Internet Explorer 8+
Opera (latest 2)
Safari (latest 2)

Cropper
一个简单的 jQuery 图片裁剪插件。

Demo
不依赖 jQuery 的 Cropper 版本功能特性，支持选项，支持方法，支持事件，支持触屏 (移动端)，支持缩放，支持旋转，支持翻转，支持 canvas，支持多个 croppers，跨浏览器支持

入门

下载最新版本.
Clone 库: git clone https://github.com/fengyuanchen/cropper.git.
用 NPM: npm install cropper 安装
用 Bower: bower install cropper 安装
安装
引入文件:

<script src="/path/to/jquery.js"></script><!-- 需要 jQuery  -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

CDNJS
CDNJS 提供了 Cropper 的 CSS 和 JavaScript CDN 。你可以在这里找到链接。

RawGit

<link  href="https://cdn.rawgit.com/fengyuanchen/cropper/v1.0.0/dist/cropper.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/fengyuanchen/cropper/v1.0.0/dist/cropper.min.js"></script>

用法
用 $.fn.cropper 方法初始化

<div class="container"><img src="picture.jpg">
</div>
$('.container > img').cropper({aspectRatio: 16 / 9,crop: function(e) {// Output the result data for cropping image.console.log(e.x);console.log(e.y);console.log(e.width);console.log(e.height);console.log(e.rotate);console.log(e.scaleX);console.log(e.scaleY);}
});

备注
cropper 的尺寸是由图片的父元素（包裹）继承来的，所以要确保用一个可见的块元素包裹图片。

输出的裁剪数据基于原始图像的尺寸，所以你可以直接使用它们来裁剪图像。

如果你尝试去对一个跨域的图片使用 cropper，请确保你的浏览器支持 HTML5 CORS 设置属性，并且你的图片服务器支持 Access-Control-Allow-Origin 选项。

选项
你可以用 $().cropper(options) 方法设置 cropper 的选项。如果你想修改全局默认选项，你需要用到 $.fn.cropper.setDefaults(options)。

aspectRatio
类型: Number
默认值: NaN 设置剪裁框的长宽比。默认的长宽比是自由比。
data
类型: Object
默认值: null
上一个剪裁数据，前提是你做了存储。将会自动传递给 setData 方法。

preview
类型: String (jQuery 选择器)
默认值: ‘’
添加额外的元素（容器）来作为预览。例如：

<div id="preview"></div>
$('.container > img').cropper({preview: $("#preview")
});

备注:

最大宽度是预览容器的初始宽度。
最大高度是预览容器的初始高度。
如果你设置了一个 aspectRatio 选项，确保为预览容器设置相同的长宽比（确保剪裁框和预览容器的长宽比是一样的，这样能避免预览的时候图片变形）。
如果预览显示不正确，那就为预览容器设置 overflow:hidden 。
strict
类型: Boolean
默认值: true
在严格模式下，剪裁框不能移出画布（图片包裹容器）。

responsive
类型: Boolean
默认值: true
在调整窗口大小的时候重新构建 cropper。

checkImageOrigin
类型: Boolean
默认值: true
默认情况下，插件会检测图片的源，如果它是跨域的图片，该图片元素将会被添加上一个 crossOrigin 属性，图片 url 地址会被加上一个时间戳，以用来为 getCroppedCanvas 重新加载图片。

通过给图片加上 crossOrigin 属性，将会阻止给图片的 url 加上时间戳，并停止重新加载图片。

modal
类型: Boolean
默认值: true
在图片上方以及剪裁框下方显示黑色模式（也就是除剪裁框以外的区域，默认是一个不透明度为0.5的黑色遮罩）。

guides
类型: Boolean
默认值: true
在剪裁框上方显示虚线

center
类型: Boolean
默认值: true
在剪裁框上方显示中心标识（剪裁框中间的白色的小加号）

highlight
类型: Boolean
默认值: true
在剪裁框上面显示白色的模态框（高亮剪裁框）

background
类型: Boolean
默认值: true
显示容器的网格背景（容器中，图片未占用区域显示的透明背景）

autoCrop
类型: Boolean
默认值: true
允许初始化的时候自动剪裁图片

autoCropArea
类型: Number
默认值: 0.8 (图片的 80% )
自动剪裁的区域大小（百分比），介于 0 到 1 之间的数字。

dragCrop
类型: Boolean
默认值: true
允许移除当前的剪裁框，然后通过在图片上拖动鼠标创建一个新的剪裁框。

movable
类型: Boolean
默认值: true
允许移动图片。

rotatable
类型: Boolean
默认值: true
允许旋转图片。

scalable
类型: Boolean
默认值: true
允许缩放图片。

zoomable
类型: Boolean
默认值: true
允许缩放图片。

mouseWheelZoom
类型: Boolean
默认值: true
允许在鼠标滚动的时候缩放图片。

wheelZoomRatio
类型: Number
默认值: 0.1
当通过滚动鼠标缩放图片的时候，定义缩放尺寸。

touchDragZoom
类型: Boolean
默认值: true
允许通过触摸拖动来缩放图片。

cropBoxMovable
类型: Boolean
默认值: true
允许移动剪裁框。

cropBoxResizable
类型: Boolean
默认值: true
允许调整剪裁框大小。

doubleClickToggle
类型: Boolean
默认值: true
允许通过双击 cropper 来切换剪裁（图片）和移动（图片）模式。

minContainerWidth
类型: Number
默认值: 200
容器最小宽度。

minContainerHeight
类型: Number
默认值: 100
容器最小高度。

minCanvasWidth
类型: Number
默认值: 0
画布最小宽度（图片包裹器）。

minCanvasHeight
类型: Number
默认值: 0
画布最小高度（图片包裹器）。

minCropBoxWidth
类型: Number
默认值: 0
剪裁框最小宽度。

minCropBoxHeight
类型: Number
默认值: 0
剪裁框最小高度。

build
类型: Function
默认值: null
build.cropper 事件的快捷方式。

built
类型: Function
默认值: null
built.cropper 事件的快捷方式。

cropstart
类型: Function
默认值: null
cropstart.cropper 事件的快捷方式。

cropmove
类型: Function
默认值: null
cropmove.cropper 事件的快捷方式。

cropend
类型: Function
默认值: null
cropend.cropper 事件的快捷方式。

crop
类型: Function
默认值: null
crop.cropper 事件的快捷方式。

zoom
类型: Function
默认值: null
zoom.cropper 事件的快捷方式。

一个简单的 jQuery 图片裁剪插件----cropper相关推荐

Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件
插件介绍这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头像上传功能,并且能够预览图片,和对图片进行简单的裁剪.旋转,花了不少时间才看到了这个插件,感觉 ...
jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...
jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定支持 ...
Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
几个jQuery的图片裁剪插件
[url]http://hi.baidu.com/coffeant/item/9931bd684220d237ac3e8396[/url] 项目里最近也要用到图片裁剪插件,刚巧发现了几个就记录在这里. ...
介绍一个十分好用的JQUERY图片放大镜插件
介绍一个十分好用的JQUERY图片放大镜插件介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL, ...
一款简单实用的jQuery图片画廊插件
图片画廊今天分享一个自己实现的jQuery 图片画廊插件. 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.h ...

一个简单的 jQuery 图片裁剪插件----cropper

一个简单的 jQuery 图片裁剪插件----cropper相关推荐

最新文章

热门文章