jquery 头像(图片)拖动裁剪插件Jcrop

Jcrop是jQuery环境下的一款功能强大使用的图片剪裁插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能,支持宽高比例锁定,支持 minSize / maxSize设置,支持改变选区或移 动选区时的回调(Callback),支持用键盘微调选 区,通过API创建互 动比如动画效果,支持CSS样式,效果如下:

jquery 头像(图片)拖动裁剪插件Jcrop

官方地址:http://deepliquid.com/content/Jcrop.html

在线演示:http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop

下载地址:http://jcrop.googlecode.com/files/jquery.Jcrop-0.9.8.zip

 

 

 

 


jquery 头像(图片)拖动裁剪插件Jcrop

imgAreaSelect

官方网站:http://odyniec.net/projects/imgareaselect/

这里介绍一下快速使用这个插件的方法:

准备工作完成后,我们可以建立一个HTML 页面,在页面的<head>之间加入下面的代码:

<head>
...
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
...
</head>

然后调用imgAreaSelect 方法来激活图片的选中区域
<script type="text/javascript">
$(document).ready(function () {
$('img#photo').imgAreaSelect({ handles: true, onSelectEnd: someFunction });
});
</script>

imgAreaSelect 方法有很多参数可以定义:

参数 描述
aspectRatio 设定选取区域的显示比率,如:”4:3″
autoHide 如果设置为true,当选择区域选择结束时消失,默认值为:false
classPrefix 这是一个字符串,表示插件样式的类名加前缀,默认值为”imgareaselect”
disable 如果设置为true,禁用插件
enable 如果设置为true,插件被重新启用
fadeSpeed 如果设置为大于零的数字,则用优美的淡入/淡出动画来显示图片,默认值为 false
handles 如果设置为true,调整手柄则会显示在选择区域内,如果设置为”corners”,则只有角处理会显示调整手柄,默认值为false
hide 如果设置为true,选择范围是隐藏
imageHeight 图片的真实高度 (if scaled with the CSS width and height properties)
imageWidth 真实图片宽度 (if scaled with the CSS width and height properties)
instance 如果设置为true,imgAreaSelect() 调用返回一个imgAreaSelect绑定到的图像的实例,使您可以使用它的API方法
keys 启用/禁用键盘支持,默认值为false
maxHeight 选取的最大高度(单位为像素)
maxWidth 选取的最大宽度(单位为像素)
minHeight 选取的最小高度(单位为像素)
minWidth 选取的最小宽度(单位为像素)
movable 确定选取是否可以移动,默认值为true
parent 一个jQuery对象或选择字符串,指定被追加到父元素,默认值为”body”
persistent 如果设置为true,选择区以外的点击将不会启动一个新的选区(即用户将只能移动/调整现有的选择范围),默认值为false
resizable 确定是否选择面积应可调整大小,默认值为true
show 如果设置为true,选区则会显示
x1
y1
最初选择区域的左上角坐标
x2
y2
最初选择区域的右上角坐标
zIndex 插件元素的z-index值,正常情况下imgAreaSelect会自动分配,但有少数情况,有必要将其设置为制定值
onInit 插件初始化时的回调函数
onSelectStart 插件开始选择时的回调函数
onSelectChange 插件改变选区时的回调函数
onSelectEnd 插件结束选区时的回调函数

你可能感兴趣的:(jquery)