在诸多sns网站中都用到了头像截取功能,最近在做一个类SNS社区项目的时候,正好需要用到这个功能,自己写一个纯javascript的吧,很麻烦(主要是自己javascript很菜),于是在众多jQuery插件中挑选了这枚imgareaselect,使用起来还是很方便的,在截取完成后返回四角坐标和高宽交给后台开发人员就可以了。
先把这枚imgareaselect插件从官网下载http://odyniec.net/projects/imgareaselect/jquery.imgareaselect-0.9.3.zip
完成后载入文件,注意css文件、图片、js文件的层级关系,当然你也可以自己修改路径。
<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>
看下简单的html代码:
<div class="" style="width:700px">
<img src="flower2.jpg" id="photo"/>
<div id="preview" style="width: 100px; height: 100px; overflow: hidden; float:right">
<img src="flower2.jpg" style="width: 100px; height: 100px;">
</div>
<form>
<fieldset>
<legend>头像截取返回的一些值</legend>
x1:<input type="text" id="x1" value="-"><br />
y1:<input type="text" id="y1" value="-"><br />
x2:<input type="text" id="x2" value="-"><br />
y2:<input type="text" id="y2" value="-"><br />
高:<input type="text" value="-" id="h"><br />
宽:<input type="text" value="-" id="w">
</fieldset>
</form>
</div>
自定义一个函数preview,方便返回坐标及宽高值。代码如下:
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
调用imgAreaSelect方法来激活选中区域:
$(function(){
$('#photo').imgAreaSelect({
aspectRatio: '1:1', //设置缩放比例
handles: true, //显示手型
fadeSpeed: 200,
onSelectChange: preview //选区改变后返回函数
});
})
附上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(imgareaselect)的网页截图插件,完整项目。可在eclipse中直接运行
原有的例子中jquery版本比较低,现在升级了jquery版本为1.6.2已经测试完成了图片裁剪的工作。 示例代码中包含了图片的生成裁剪并保存工作,代码可直接移植到项目中去,头像编辑,图片编辑等模块
这是利用jquery的imgareaselect进行截图的插件,使用代码请看我博客
jQuery插件imgAreaSelect 实例代码,自己实践后的代码,很简单的代码,完成了图片上传、剪切的功能,很不错,推荐。
jquery的imgareaselect插件
imgAreaSelect_Demo 从官方的教程做了个
javascript截图 jQuery插件imgAreaSelect用法详解_.docx
利用jquery的imgAreaSelect插件实现图片裁剪示例
关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳、图片编辑等。下面通过本文给大家介绍jQuery插件imgAreaSelect基础讲解,需要的的朋友参考下吧
jquery.imgareaselect-0.9.2封装jquery.imgareaselect-0.9.2封装jquery.imgareaselect-0.9.2封装
jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图
jquery.imgareaselect-0.9.10图片裁切插件下载,可把上传的图片进行裁剪再保存,在以前来说非常棘手的问题,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现图片裁切功能。注,本插件包内不包括...
imgAreaSelect 基于jQuery的图片切割放大插件 0.94.zip
jquery_imgareaselect图片裁切插件使用的中文文档
jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像
上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识;那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3...
jquery.imgareaselect-0.8.min.js
主要介绍了avascript截图 jQuery插件imgAreaSelect使用详解,需要的朋友可以参考下