jQuery插件imgAreaSelect基础讲解

关于ImgAreaSelect,  是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳、图片编辑等~~来具体看一下

1、先下载imgAreaSelect插件

下载地址:

英文:http://odyniec.net/projects/imgareaselect/

中文:http://www.css88.com/EasyTools/javascript/jQueryPlugin/imgAreaSelect/index.html

在头部引用:

<link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" rel="external nofollow" /> <br><script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>

2、下载的插件里有三个样式表

imgareaselect-default.css – 这是默认的样式表,

imgareaselect-animated.css – 这个样式与默认的样式表基本是一样的,只是它能够让选择区域边框变化

imgareaselect-deprecated.css – 只有你想使用不赞同的选项时才用这个样式表。

你只需要在html头部将其中的一个样式表添加进来就可以。这css文件夹中还包含4张gif图片,它们是用来显示边框的。

3、元素分布如图所示

此插件通过创建几个div元素来表示选择区域,包括边框、可调整手柄以及未选择的区域。这些元素已经指定了特定的类名了,所以你可以通过CSS或者jQuery选择器来获得并操作它们。

其中的前缀"imgareaselect"是默认的前缀,可以通过"classPrefix"选项来修改。这在当有许多选择框需要分别操作(比如修改样式)的时候特别有用。

 4、选项

用户在这个插件的很多方面都可以进行定制,用户通过插件选项来达到这个目的(这些选项会在插件初始化的时候起效)。这些选项包括:


选项


描述


aspectRatio


长宽比,以后在选择时候就会维持不变。

e.g. "4:3"


autoHide


如果设为true,那么在选择完后区域会消失。

Default:false


classPrefix


预先给插件元素的前缀(详见下面:5、元素与类)

Default:imgareaselect


disable


如果设置成true,这个插件将不起作用(但是图像还是可见的)


enable


如果设置成true,这个插件又将重新起作用


fadeSpeed


若设置成大于零的某个数,将"渐隐/渐现"这个插件

Default:true


handles


若设置成true,在改变大小的时候显示改变框(就是角点有些小"矩形")

Default:false


hide


若设置成true,则隐藏选择框


imageHeight


图像的真实高度(因为有可能被CSS缩放过了)


imageWidth


图像的真实宽度(因为有可能被CSS绽放过了)


instance


若设为true,imgAreaSelect()函数会返回一个对选择区域图像的一个引用,以便能够进一步使用API。(详见8、API方法)


keys


启用/关闭键盘支持(详见7、键盘支持)

Default:false


maxHeight


限制选择框(以像素为单位),设置最大、最小的高度、宽度。


maxWidth


minHeight


minWidth


movable


设置是否支持选择框移动

Default:true


parent


指定此插件默认所附加到的父元素

Default:body


persistent


若设置成true,点击选择区域外将开始一个新的选项(换言之,是否让用户只能移动/缩放选择区域)

Default:false


remove


若设置成true,则该插件将完全移除


resizable


决定选择区域是否可以改变大小

Default:true


resizeMargin


当选择区域宽度超过多少像素时将启用"可改变大小"模式


show


如果设置成true,选择区域将可见


x1

y1


初始化时选择框左上角的坐标


x2

y2


初始化时选择框右下角的坐标


zIndex


设置此插件所作用元素的z-index的值,一般情况下,imgAreaSelect 总是可以自动计算出它的值,但是极少数情况下还是有必要设置的。


onInit


当插件初始化时所调用的函数(详见6、回调函数)


onSelectStart


当开始选择时所调用的函数(详见6、回调函数)


onSelectChange


当改变选择区域时所调用的函数(详见6、回调函数)


onSelectEnd


当选择结束时所调用的函数(详见6、回调函数)

5、回调函数

回调函数(当设置onInit, onSelectStart, onSelectChange或 onSelectEnd选项)接收两个参数,第一个选项是这个插件所应用图像的引用,另外一个则是呈现当前选择的对象,这个对象有六个性质。

为了便于理解,下面给出当选择完后执行的回调函数的例子:

$('img#photo').imgAreaSelect({
onSelectEnd: function (img, selection) {
alert('width: ' + selection.width + '; height: ' + selection.height);
}
});

6、键盘支持

如果选项"keys"设置为true,那么我们能够通过键盘上的按键进来选择框的移动。下面的键可以使用,默认的功能如下:

每个属性通过设置数值(以像素为单位,数值要不小于1),表明当按下此键时移动/改变大小多少像素,或者指定其值为"string"来指定它是"resize"模式。例如:

$('img#example').imgAreaSelect({
keys: { arrows: 15, ctrl: 5, shift: 'resize' }
});

这个例子里设置成"方向键会移动选区15像素,按住Ctrl键会移动5像素,而按住Shift键时则切换到resize模式"。

如果不止一个图像,且自己修改了按键设置,那么只对一个图像会应用这个自定义设置。一般来说,当"激活"(用鼠标点击)某个图像时,这个图像就会使用自定义的按键设置。

7、API方法

这个插件也提供了几个API方法扩展它的应用,并能够通过这些API方法跟其他web应用联合起来。

为了使用这些方法,首先需要一个插件对象,可以调用imgAreaSelect()函数并让其选项"instance"设置为true来实现:

var ias = $('#photo').imgAreaSelect({ instance: true });

现在就可以使用此对象来调用公共的方法了。例如,设置一个默认预定义的范围:

ias.setSelection(50, 50, 150, 200, true);
ias.setOptions({ show: true });
ias.update();

只要当初始化完成,就可以使用这些API方法了。下面列出这些API方法:

二、简单实例

1、宽度或者高度限制

minWidth、minHeight、maxWidth以及maxHeight选项允许你设置选区的范围。在这个例子中,图像的最大范围将限制为200x150px。

$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({ maxWidth: 200, maxHeight: 150, handles: true });
});

2、固定高宽比

配置aspectRatio选项就可以了,这里将其设置成"4:3":

$(document).ready(function () {
$('#bee').imgAreaSelect({ aspectRatio: '4:3', handles: true });
});

3、设置初始选项区域

配置x1, y1, x2与 y2选项就可以了:

$(document).ready(function () {
$('#duck').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210 });
});

三、回调函数示例

1、选区预览

在下面的代码小片断里,onSelectChange()回调函数实现了选择区域预览的效果。

官方源代码:http://odyniec.net/projects/imgareaselect/examples-callback.html

function preview(img, selection) {
var scaleX = 100 / (selection.width || 1);
var scaleY = 100 / (selection.height || 1);
$('#ferret + div > img').css({
width: Math.round(scaleX * 400) + 'px',
height: Math.round(scaleY * 300) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}
//这里通过jQuery语法在原来图片后插入同样的图片
$(document).ready(function () {
$('<div><img src="ferret.jpg" style="position: relative;" /><div>')
.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
})
.insertAfter($('#ferret'));
$('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});

由于预览窗口是100x100px的,因此当截图窗口小于100px时,预览图会放大;当截图窗口大于100px时,预览图会缩小。这两种效果图如下:

截图 1 当截图窗口大于100px时

截图 2 当截图窗口小于100px时

需要说明的是,这里制作这种效果使用了一种技巧。最关键的一个是等比率缩放.它需要两个图片,第一图是原图,第二个图是选择区域后显示的图,用第一个图上的选择坐标+css控制产生第二个图,实际上两个图是一样的,只不过通过css控制了第二张图的显示区域与缩放比率。证据如下:

【证据一】在$(document).ready()函数中通过insertAfter插入"src"也是"ferret.jpg"的图片。再注意一下,这一段里的"overflow: 'hidden',"这一行代码就是让超过100px高宽的图片额外内容隐藏掉。

【证据二】在preview()函数中,首先就定义了scaleX与scaleY,它们的内容就是100/selection.width(或height) ,也就是当selection.width小于100时,这个因子起放大作用,反之起缩小作用。

值得注意的是:

回调函数中实际图的宽高(这里的300,400是实际图的高,要根据实际情况调整!),回调函数中新图的宽高这些参数必须设置正确、否则会出现 选择偏差

2、提交选区的坐标

如果需要实现真正截图功能必须使用服务器端支持,例如php asp aspx jsp。也就是意味着,在客户端选择只是第一步,如果需进一步的处理,必须要将这选区的坐标提交给服务器。那么如何实现呢?

创建一个表彰,里面有四个隐藏域:

<form action="crop.php" method="post">
<input type="hidden" name="x1" value="" />
<input type="hidden" name="y1" value="" />
<input type="hidden" name="x2" value="" />
<input type="hidden" name="y2" value="" />
<input type="submit" name="submit" value="Submit" />
</form>

然后在初始化imgAreaSelect时,使用onSelectEnd()回调函数将选择后的数据赋给这些隐藏域,正如下面代码那样:

$(document).ready(function () {
$('#ladybug').imgAreaSelect({
onSelectEnd: function (img, selection) {
$('input[name="x1"]').val(selection.x1);
$('input[name="y1"]').val(selection.y1);
$('input[name="x2"]').val(selection.x2);
$('input[name="y2"]').val(selection.y2);
}
});
});

这样当点击"submit按钮"时,页面将上载到服务器,如果使用PHP的话,使用$_POST['x1']等就得到相应的坐标数据了。

以上所述是小编给大家介绍的jQuery插件imgAreaSelect基础讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-05-24

jquery imgareaselect 使用利用js与程序结合实现图片剪切

复制代码 代码如下: /* 缺陷,当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到 需要在图片load函数里面初始化才可以 */ sanshi_imgareaselect = function(pic_id,view_div_id){     this.pic_obj = jQuery("#"+pic_id);     this.pic_width;     this.pic_height;     this.view_d

jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)

<body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images

javascript截图 jQuery插件imgAreaSelect使用详解

为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能. 一,准备: 两个JS文件 1,jq

利用jQuery插件imgAreaSelect实现获得选择域的图像信息

还是先来分析一下: (以下的值,如何获得,以后在具体的实现中再来分析,现在只谈宏观的) 如何获得选择域的图像信息?  其实就是要我们如何获得这个选择区域,在图像中的那个位置,并且这个区域的大小是多少? 把位置和大小告诉了计算机,它就知道我们是要获取那一块的图像信息了. (我们的选择区域,是在一个平面当中,而且是一个规则的图形,正方形,或都矩形(通俗:长方形)) 大小: 这个区域的宽度,高度值,两值相乘,就是这个区域的面积,即大小.(这个应该不难) 位置: 1.假设我们只告诉计算机,这个选择区域一

利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)

这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.  3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ["区域":是宽*高,也就是面积:] ["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数] 一.怎么能放大或者缩小图片的局部?

PHP+jQuery+Ajax实现多图片上传效果

今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码 代码如下: <form id="imageform" met

jquery插件ajaxupload实现文件上传操作

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前 图2 文件上传后 具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp

使用jquery.form.js实现图片上传的方法

本文实例讲述了使用jquery.form.js实现图片上传的方法.分享给大家供大家参考,具体如下: testupfile2.php <?php header('Content-type:text/html;charset=utf-8'); include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png',

利用imgareaselect辅助后台实现图片上传裁剪

因为项目当中用到图片裁剪,本来可以不用到后台进行裁剪的,但是要兼容万恶的IE浏览器,所以不得不使用后台进行裁剪. 这次使用到imgareaselect插件获取需要裁剪区域的坐标,再由后台进行裁剪操作.先上个效果图再说 但是这里有一个坑就是上传的图片过大,可能会造成裁剪的区域跟插件中显示的不一样,所以得现在后台对云图片进行压缩在裁剪. /** * 等比例压缩算法: * 算法思想:根据压缩基数和压缩比来压缩原图,生产一张图片效果最接近原图的缩略图 * @param srcURL 原图地址 * @pa

PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数 原理:ajaxfileupload是通过监听iframe的onload方

jQuery插件ajaxfileupload.js实现上传文件

AjaxUpLoad.js的使用实现无刷新文件上传,如图 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden" id="hidFileNam