jQuery 图像裁剪插件Jcrop

Jcrop简介

Jcrop 是一个功能强大的 jQuery 图像裁剪插件，结合后端程序（例如：PHP）可以快速的实现图片裁剪的功能。

Jcrop是一款免费的软件，采用MIT License发布。

注：本文主要围绕 Jcrop v2.0.0-RC1 版本进行介绍，一些参数或API在 Jcrop v0.9.12 及之前版本中可能并不支持。

版本

Jcrop v0.9.12 支持画一个框截取图片。

Jcrop v2.0.0-RC1 相比于老版本，新增了支持画多框的功能。

下载地址：

http://jcrop.org/download

下载对应版本的压缩包。

压缩包中有demo目录，其中有多种应用场景的范例，可以参考。

使用方法

载入CSS文件

载入Javascript文件

给IMG标签加上ID

调用Jcrop

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

参数说明

下表为Jcrop对象的主要参数：

属性类别	名称	默认值	说明
选中框属性	edge	{ n: 0, s: 0, e: 0, w: 0 }	设置框的四条边界线的粗细例： cb.setOptions({ edge: {n: 15, e: -20, s: -40, w: 28}});
	setSelect	null	设置一个框，参数应该分别为这个框的左上角x坐标，左上角y坐标，宽度，高度例： cb.setSelect([ 147, 55, 456, 390 ]);
	linked	TRUE	是否连接
	linkedCurrent	TRUE	是否连接当前选中框
	canDelete	TRUE	允许删除框
	canSelect	TRUE	允许选中框
	canDrag	TRUE	允许拖拽框
	canResize	TRUE	允许放大缩小框
子组件	eventManagerComponent	Jcrop.component.EventManager	事件管理组件
	keyboardComponent	Jcrop.component.Keyboard	键盘事件响应组件
	dragstateComponent	Jcrop.component.DragState	拖拽状态组件
	stagemanagerComponent	Jcrop.component.StageManager	stage管理组件
	animatorComponent	Jcrop.component.Animator	动画处理组件
	selectionComponent	Jcrop.component.Selection	选中框管理组件
	stageConstructor	Jcrop.stageConstructor	stage对象构造器
stage属性	allowSelect	TRUE	允许选新框
	multi	FALSE	允许画多个框
	multiMax	FALSE	最大框数
	multiCleanup	TRUE	允许清除所有框
	animation	TRUE	允许动画效果
	animEasing	swing'	动画效果类型
	animDuration	400	动画持续时间
	fading	TRUE	允许淡入淡出效果
	fadeDuration	300	淡入淡出持续时间
	fadeEasing	swing'	淡入淡出类型
	bgColor	black'	背景颜色
	bgOpacity	0.5	背景透明度
启动选项	applyFilters	[ 'constrain', 'extent', 'backoff', 'ratio', 'shader', 'round' ]	应用过滤器
	borders	[ 'e', 'w', 's', 'n' ]	边框
	handles	[ 'n', 's', 'e', 'w', 'sw', 'ne', 'nw', 'se' ]	句柄
	dragbars	[ 'n', 'e', 'w', 's' ]	拖拽栏
	dragEventTarget	window	拖拽事件目标
	xscale	1	x方向比例
	yscale	1	y方向比例
	boxWidth	null	box宽度
	boxHeight	null	box高度

API

下表为Jcrop对象的主要API：

名称	说明
init	初始化Jcrop对象
destroy	销毁Jcrop对象
applySizeConstraints	应用大小限制条件
initComponent	初始化指定子组件
setOptions	设置选项参数例： cb.setOptions({ allowSelect: true, multi: false });
applyFilters	应用过滤器
getDefaultFilters	获取默认过滤器
setSelection	设置选中框
getSelection	获取选中框
newSelection	创建一个新的选中框
hasSelection	判断是否有选中框
removeSelection	移除选中框
addFilter	添加过滤器
removeFilter	移除过滤器
blur	不聚焦选中框
focus	聚焦选中框
initEvents	初始化事件
maxSelect	设置选中框的最大宽度和高度
refresh	刷新所有框
blurAll	所有框都取消聚焦
scale	框按照比例调整
unscale	scale的反向操作
deleteSelection	删除选中框，并聚焦在最早创建的框上
animateTo	以动画的形式生成一个新的框
setSelect	设置框
getContainerSize	获取容器的尺寸
resizeContainer	调整容器的宽度和高度
setImage	设置Jcrop绑定的图像，可以用这个函数更换图片
update	更新框

范例代码解读

这部分内容是对于Jcrop2中的demo核心代码进行注释讲解。详细内容请参考对于demo的注释内容

注：以下所示的代码都是在 Jcrop v2.0.0-RC1 版本的demo代码基础上提炼了核心代码。替换原目录下的代码就可以直接运行。

basic.html

这个demo演示了最基本的功能。可以在图片上拖拽、拉伸框并实时显示坐标。

box-sizing.html 代码与 basic.html 基本相同，只是增加了设置框的大小，所以合并在一处讲解。

View Code

本文转自静默虚空博客园博客，原文链接：http://www.cnblogs.com/jingmoxukong/p/4173421.html，如需转载请自行联系原作者

jQuery 图像裁剪插件Jcrop相关推荐

jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定支持 ...
jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件
[Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...
Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
Croppic – 免费开源的 jQuery 图片裁剪插件
Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData 对 ...
一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
图片缩放插件 html,12款免费的 jQuery 图像缩放插件
设计电子商务网站必知的十款免费 jQuery 图像缩放插件 Jquery 图像缩放插件不仅简单易用,而且还能够给予用户更好的体验.你只需要在图像或产品上移动鼠标,你将看到图片或产品的详细信息. 今天 ...
jquery 图像滑块_10个很棒的jQuery图像滑块插件
jquery 图像滑块 The introduction of jQuery has contributed a lot in making the overall process of websit ...
图片裁剪插件Jcrop.js的使用
中文API文档地址:http://code.ciaoca.com/jquery/jcrop/ 简单使用裁剪: <!DOCTYPE html> <html lang="en& ...
使用 jQuery Jcrop 实现图像裁剪
一.使用方法: 代码: // 载入CSS文件 <link rel="stylesheet" href="css/jquery.Jcrop.css"> ...

jQuery 图像裁剪插件Jcrop

jQuery 图像裁剪插件Jcrop相关推荐

最新文章

热门文章