多彩科技原创翻译,转载请注明出处:http://www.kmwzjs.com
Jcrop是一款jquery图片裁剪插件,可以实现图片在线裁剪,达到和图像软件处理的效果,界面和操作也相当的人性化,只需要拖曳鼠标即可完成,部署到服务器也非常简单,在网站建设过程中轻易美化表单,并且改善用户体验,本文是Jcrop的中文文档手册。
入门
•下载当前版本
•放到页面相应的位置
•同时也需要加载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>
注意
•Text 必须有引号
•其他就不要有引号
•最后一个参数后面没有逗号
分享到:
相关推荐
新鲜的jcrop图像裁剪中文文档,html版,纯手工翻译需要请自取
新鲜的Jcrop图像裁剪中文文档,纯手工翻译,如有需要请自取
新鲜的jcrop图像裁剪中文文档,markdown版,纯手工翻译
jcrop图片裁剪demo,简单的jcrop图片裁剪demo,下载后可以直接用
做Jcrop图片裁剪的必须文件
Jcrop 图片裁剪 jcrop-v0.9.10
jquery-Jcrop实现图片裁剪截图上传和保存,很好用,做制作头像是个很好的工具,比图片压缩好多了
php结合jquery ajaxfileupload及jcrop插件实现无刷新上传,裁剪
Jcrop图片预览裁剪功能,兼容IE8及IE8+和主流浏览器,预览框高度不限制,如需要限制高度需自行改写,也可留言联系。
struts2+jsp+jquery+Jcrop实现图片裁剪并上传, 参照http://blog.csdn.net/csd_xuming/article/details/8848939 的有效实现实例
jquery Jcrop图像裁切插件中文api文档
在js中压缩,在页面上选定区域并上传,在java中根据参数处理图像,页面处理图片缩放裁剪上传的功能。
js 的 jCrop 插件 配合 php 进行图片剪切以及上传!
可以实现头像等的按比例裁剪。也可以按照需求自由裁剪。插件基于jQuery,方便好用。内含使用demo,可参照demo快速上手。
jquery Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:java)可以快速的实现图片裁剪的功能
PHP+jQuery+jCrop裁剪头像 处理图片
裁剪上传图片 jcrop
Jcrop (官方的) - 图片裁剪jQuery插件
$('#target').Jcrop({ minSize: [190,190], //边框最小尺寸 //maxSize:[190,190], setSelect: [0,0,170,230], //创建边框参数【x,y,x1,y1】 onChange: updatePreview, //边框改变时发生的事件 onSelect: ...