开发者社区> 文艺小青年> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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文件

<link rel="stylesheet" href="Jcrop.css">

载入Javascript文件

<script src="jquery.js"></script> 
<script src="Jcrop.js"></script>

给IMG标签加上ID

<img id="element_id" src="pic.jpg">

调用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
Jcrop简介 Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能。 Jcrop是一款免费的软件,采用MIT License发布。
1208 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1014 0
推荐12款非常有用的流行 jQuery 插件
  jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
875 0
40款非常棒的 jQuery 插件和制作教程(系列二)
  jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
962 0
40款非常棒的 jQuery 插件和制作教程(系列一)
  jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
899 0
10款新鲜出炉的 jQuery 插件
  这篇文章与大家分享的是10款新鲜出炉的基于 jQuery 开发的 Ajax 插件,有幻灯片、图片画廊、菜单等很多有用的插件。这些作者的想法特别新颖,希望你能从中找到自己需要的插件。 1. Chrome Style jQuery Image Gallery 一款用于实现漂亮的Chrome风格图片画廊的 jQuery 插件,在线演示 2.
925 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
937 0
JQUery插件-thickbox
Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k.
767 0
3576
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载