Jcrop是一个jQuery插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能。
特点:
- 对所有图片均unobtrusively(无侵入的,保持DOM简洁)
- 支持宽高比例锁定
- 支持 minSize / maxSize设置
- 支持改变选区或移 动选区时的回调(Callback)
- 支持用键盘微调选 区
- 通过API创建互 动,比如动画效果
- 支持CSS样式
入门
•下载当前版本
•放到页面相应的位置
•同时也需要加载jquery
加载顺序
•jQuery.js
•Jcrop.js
•Jcrop CSS样式
如:
<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
注意:你也可以调整成其他的位置
调用
假如:<img src="flowers.jpg" id="cropbox" />
编写以下脚本
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop();
});
</script>
Jcrop就可以激活了
事件处理
Jcrop有2个主要的事件处理程序 onChange 和 onSelect.
onSelect callback 选择完成后调用
onChange callback 选框移动(或者说改变)时调用
定义一个事件出来函数
<script language="Javascript">
function showCoords(c)
{
// variables can be accessed here as
// c.x, c.y, c.x2, c.y2, c.w, c.h
};
</script>
然后附加上去
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
onChange: showCoords
});
});
</script>
这是一个标准的jquery语法,注意最好一个属性后面没有逗号
设置选项
参数名称 类型 描述 默认
aspectRatio decimal 设定宽高比 n/a
minSize array [ w, h ] 设置最小尺寸 n/a
maxSize array [ w, h ] 设置最大尺寸 n/a
setSelect array [ x, y, x2, y2 ] 设置一个初选框的位置 n/a
bgColor color value 设置背景容器颜色 'black'
bgOpacity decimal 0 - 1 设置当图像被裁剪选框外的透明度 .6
如:
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
bgColor: 'black',
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
});
</script>
分享到:
相关推荐
jQuery图片裁剪插件Jcrop.js</title> <link href="css/basic.css?3.1.64" rel="stylesheet" type="text/css" /> <link href="css/jquery.Jcrop.css?3.1.64" rel="stylesheet" type="text/css" />...
jQuery图像裁剪插件Jcrop.js是一款功能强大的jQuery图像裁剪插件,可以结合后端程序快速的实现图片裁剪的功能。
Jcrop是一款跨浏览器的jquery图片剪裁插件。它兼容非常古老的ie6浏览器,并提供多个配置参数,实现功能强大的图片剪裁功能。
Jcrop.js实现的一款功能强大的jQuery图片裁剪插件,可以结合后端程序快速的实现图像裁剪的功能,右侧有3个图像缩略图尺寸可选。
jQuery图像照片剪裁插件Jcrop中文演示 静态演示页面 从最简单的开始 — 默认的行为表现 基本处理程序 — 基本形式的结合 锁定纵横比/剪裁效果图预览 — 不错的效果示例 设置/动画选择(初级API) — 动画演示 API...
jQuery图像裁剪插件Jcrop js是一款功能强大的jQuery图像裁剪插件,可以结合后端程序快速的实现图片裁剪的功能。
图片裁剪插件JqueryJcrop兼容大数浏览器,测试无误,链接了中文参数说明详情见页面
jQuery图像裁剪插件Jcrop.js是一款功能强大的jQuery图像裁剪插件,可以结合后端程序快速的实现图片裁剪的功能。
Jcrop 基于jquery的图片裁剪插件.zip
Jcrop (官方的) - 图片裁剪jQuery插件
目前做的这个项目中要用到用户头像功能,领导说最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。
jquery Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:java)可以快速的实现图片裁剪的功能
今天从官方网址下载Jcrop插件使用,发现PHP那个截图页面运行错误,截得的图是黑黑的,经过一会儿,把问题修正了,现把修正版拿出来分享给大家,多多支持哦!
适应各浏览器图片裁剪无刷新上传js插件-Jcrop Jcrop js jquery C# asp.net 文件包括: WebForm1.aspx myupload.html jquery.Jcrop.min.css jquery.min.js jquery.Jcrop.min.js imageCropperUpload.js
js 的 jCrop 插件 配合 php 进行图片剪切以及上传!
一个基于和的本地图片裁剪插件。 ####License: ###为什么需要这玩意 目前很多的图片上传、裁剪都是基于服务器端的。比如Jcrop,在选择好图片后仅仅是做了一个裁剪的UI,然后发给后端起始位置、大小等参数,由后端来...
网页端 裁剪图片,不需要经过服务器。 这个是用 https://github.com/mailru/FileAPI 框架实现的。配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度。 核心代码: var el = $('input').get(0); ...
php结合jquery ajaxfileupload及jcrop插件实现无刷新上传,裁剪
jquery效果1: Jcrop-jquery图片裁剪插件 jExpand+samples jOuery动态下滑菜单