jQuery插件imgAreaSelect的基本说明

关于ImgAreaSelect，它是一个jQuery插件，支持用户通过鼠标拖动选择图片的某一部分，如图片拖动、图片编辑等。~ ~来看一看

1.下载imgAreaSelect首先选择插件

下载地址：

中文：http://odyniec.net/projects/imgareaselect/

英文：http://www . CSS 88.com/easy tools/JAVAScript/jqueryplugin/imgareserve/index . html

在标题引用中：

link rel='样式表' type='text/css' href='./jquery . imgareselect-0 . 9 . 10/CSS/imgareselect-default . CSS ' rel=' external no follow '/Brscript type=' text/JavaScript ' src=' http :/jquery . imgareservice-0 . 9 . 10/scripts/jquery . imgareservice . pack . js '/script 2，下载的插件中有三个样式表

这是默认的样式表。

imgareselect-animated . CSS-此样式与默认样式表基本相同，只是它可以更改选择区域的边框

imgareselect-弃用. CSS-仅当您想使用不赞成的选项时才使用此样式表。

您只需要在html标题中添加一个样式表。这个css文件夹还包含四个gif图片，用于显示边框。

3.元素的分布如图所示

该插件通过创建几个div元素来表示选择区域，包括边框、可调手柄和未选择的区域。这些元素已经被分配了特定的类名，因此您可以通过CSS或jQuery选择器来获取和操作它们。

前缀“imgareaselect”是默认前缀，可以通过“classPrefix”选项进行修改。当有许多选择框需要单独操作(如更改样式)时，这尤其有用。

4.选择

用户可以自定义这个插件的许多方面。用户可以通过插件选项来实现这个目标(这些选项将在插件初始化时生效)。这些选项包括：

选项

描述

aspectRatio

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

例如“4:3"”

autoHide

如果设置为true，该区域将在选择后消失。

Default:false

classPrefix

提前给插件元素加前缀(见下文：5。元素和类)

Default:imgareaselect

disable

如果设置为true，该插件将不起作用(但图像仍然可见)

enable

如果设置为true，插件将再次工作

fadeSpeed

如果设置为大于零的数字，插件将“褪色/褪色”

默认值：默认值

handles

如果设置为true，则在更改尺寸时会显示更改框(也就是说，角有点“矩形”)

Default:false

hide

如果设置为真，选择框将被隐藏

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

如果设置为真，选择区域将可见

x1

y1

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

x2

y2

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

zIndex

设置此插件作用的元素的z索引值。一般来说，imgAreaSelect总是可以自动计算其值，但在极少数情况下需要设置。

onInit

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

onSelectStart

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

onSelectChange

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

onSelectEnd

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

5.回调函数

回调函数(当设置了init、onselectstart、on select change或onSelectEnd选项时)接收两个参数，第一个选项是对此插件应用的图像的引用，另一个选项是呈现当前选定的对象，该对象有六个属性。

为了便于理解，下面是选择后执行回调函数的一个例子：

$('img#photo ')。imgareselect({ onselectend : function(img，selection){ alert(' width : ' selection . width ')；height : ' selection . height)；}});6.键盘支持

如果选项“键”设置为真，那么我们可以通过按键盘上的键来选择框的移动。可以使用以下按键，默认功能如下：

每个属性通过设置一个数值(以像素为单位，该数值不应小于1)或将其值指定为“字符串”以指定其处于“调整大小”模式来指示按下该键时要移动/改变多少像素。例如：

$(“img #示例”)。imgareselect({ key : { arrow s : 15，ctrl: 5，shift : ' resize ' } })；在本例中，它被设置为“箭头键将选择移动15个像素，按住Ctrl键将移动5个像素，按住Shift键将切换到调整大小模式”。

如果有多个图像，并且您自己修改了密钥设置，则此自定义设置将仅应用于一个图像。一般来说，当图像被“激活”(用鼠标点击)时，图像将使用自定义按钮设置。

7.API方法

该插件还提供了多种API方法来扩展其应用，并可以通过这些API方法与其他web应用结合。

要使用这些方法，首先需要一个插件对象，可以通过调用imgAreaSelect()函数并将其选项“instance”设置为true来实现：

var ias=$('#photo ')。imgareselect({ instance : true })；现在，您可以使用此对象调用公共方法。例如，设置默认的预定义范围：

ias.setSelection(50，50，150，200，true)；IAS . SetOptions({ show : true })；IAS . update()；只要初始化完成，就可以使用这些API方法。原料药的方法如下：

第二，简单的例子

1、宽度或高度限制

最小宽度、最小八边形、最大宽度和最大高度选项允许您设置选择范围。在本例中，图像的最大范围将被限制为200x150px。

$(文档)。ready(function(){ $(' # lady bug _ ant ')。imgareselect({ maxwidth : 200，maxHeight: 150，handles 3360 true })；});2.固定纵横比

只需配置aspectRatio选项，并在此将其设置为“4: 3”:

$(文档)。ready(function () {$('#bee '))。imgaraeselect({ aspelectricity : ' 4:3 '，handles 3360 true })；});3.设置初始选项区域

您可以配置x1、y1、x2和y2选项：

$(文档)。ready(function () {$('#duck '))。imgareselect({ x 1: 120，y1: 90，x2: 280，y 2: 210 })；});三、回调函数示例

1.预览所选内容

在下面的代码片段中，onSelectChange()回调函数实现了对所选区域的预览。

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

函数预览(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 '，margin left : '-' math . round(scaleX * selection . x1)' px '，marginto p : '-' math . round(scaleY * selection . y1)' px ' })；}//在这里，插入同样的图片$(文档)。ready(function(){ $(' div img src=' http : ferret . jpg ' style=' position : relative；/div ')。css({float: '左'，position: '相对'，overflow: '隐藏'，width: '100px '，height: '100px'})。insert after($(' # ferret '))；$('#ferret ')。imgaraeselection({ aspelectricity : ' 1:1 '，on selectchange : preview })；});因为预览窗口是100x100px，当截图窗口小于100px时，预览图像会放大；当截图窗口大于100px时，预览图像会缩小。这两个渲染如下：

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

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

需要注意的是，这里使用了一种技巧来产生这种效果。最关键的是等比例。它需要两张图片，第一张是原图，第二张是选择区域后显示的图片。第二张图片是通过css控制第一张图片上的选择坐标生成的。其实两张图是一样的，只是第二张图的显示面积和比例是用css控制的。证据如下：

[证据1]在$(文档)中插入一张也是“ferret.jpg”的“src”图片。ready()函数通过insertAfter。再次注意，这一段的“overflow :‘hidden’”一行是为了隐藏100px以上高、宽图片的额外内容。

[证据2]在preview()函数中，首先定义了scaleX和scaleY，它们的内容为100/selection.width(或height)，即当selection.width小于100时，这个因子起到放大的作用，反之亦然。

值得注意的是：

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

2.提交选区的坐标

如果需要实现真正的截图功能，就必须使用服务器端的支持，比如php asp aspx jsp。也就是说，在客户端上选择只是第一步。如果需要进一步处理，必须将此选定区域的坐标提交给服务器。那么如何实现呢？

创建包含四个隐藏字段的表彰：

表单操作='crop.php '方法='post '输入类型='hidden '名称='x1 '值='' /输入类型='hidden '名称='y1 '值='' /input type='hidden '名称=' x2 '值=''/InputType=' hidden '名称=' y2 '值=''/InputType=' submit '名称=' submit '值=' submit'/表单然后在初始化imgAreaSelect时，使用onSelectEnd()回调函数

$(文档)。ready(function(){ $(' #瓢虫')。imgareselect({ 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)；}});});这样，当您单击“提交”按钮时，页面将被上传到服务器。如果使用PHP，可以通过使用$_POST['x1']得到相应的坐标数据。

以上是边肖介绍的jQuery插件imgAreaSelect的基本说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！