1.技术文件1。简介ImgAreaSelect是一个jQuery插件，支持用户通过拖动鼠标选择图片的一部分，非常时尚。此外，网站的其他技术，如图片拖动、图片编辑等，也可以基于这个选定的图像区域进行应用。2.基本用法这个插件是基于jQuery通过imgAreaSelect()方法调用的，它的操作对象是HTML中img元素中的图像。复制的代码如下： script type=' text/JavaScript ' $(文档)。ready (function () {$ ('img # photo '))。imgaresult({ handles 3360 true，on select end :某些函数})；});/script如果jQuery对象中有多个img元素，插件会将此方法逐个应用于内部的元素。实际上，这种方法不仅适用于img元素，还支持任何块级元素(如带图像背景的div元素)。与其他jQuery插件类似，这个插件可以在$(document)中初始化。ready()或$(window)。load()句柄。3.选项用户可以自定义这个插件的很多方面，用户可以通过插件选项来实现这个目标(这些选项将在插件初始化时生效)。这些选项包括：选项描述了在选择时将保持不变的aspectRatio。例如“4:3”自动隐藏如果设置为真，该区域将在选择后消失。Default:falseclassPrefix前缀前缀的插件元素(详见下文：5。元素和类)默认值： IMGareaselectDisable如果设置为true，插件将无法工作(但图像仍然可见)enable如果设置为true，此插件将再次工作。如果fadeSpeed设置为大于零的数字，如果Default:truehandles，插件“淡入/淡入”设置为true，当大小改变时(即角有点小的“矩形”)会显示更改框。如果默认值：falsehide设置为true，则隐藏选择框的图像高度的真实高度(因为它可能已被CSS缩放)和图像宽度的真实宽度(因为它可能已被CSS打开)。如果实例设置为true，则imgAreaSelect()函数将返回对选择区域图像的引用，以便可以进一步使用该API。(见8。API方法获取详细信息)键启用/禁用键盘支持(参见7。键盘支持获取详细信息)默认值： false最大高度限制选择框(以像素为单位)，并设置最大和最小高度和宽度。Maxthiminhigh minwidthmovable设置是否支持选择框移动默认值：父元素指定默认情况下此插件所附加的父元素默认值：bodypersistent。如果设置为true，在选择区域外单击将启动一个新选项(换句话说，让用户仅移动/缩放所选区域)默认值：falseremove如果设置为true，则插件将完全移除可调整大小，以决定是否可以调整所选区域的大小。默认值：当选定区域的宽度超过多少像素时，大小调整边距将启用“大小可调整”模式。显示如果设置为真，所选区域将可见。x1 y1初始化时选择框左上角的坐标，x2 y2初始化时选择框右下角的坐标，zIndex设置这个插件作用的元素的z-index的值。一般情况下，imgAreaSelect总是可以自动计算其值，但在极少数情况下需要设置。OnInit函数在插件初始化时调用(见6，回调函数)onSelectStart函数在选择开始时调用(见6，回调函数)onSelectChange函数在选择区域改变时调用(见6，回调函数)onSelectEnd函数在选择完成时调用(见6，回调函数)4。与插件一起分发的还有三种样式表：imgareselect-default . CSS-这是默认样式表，imgareselect-animated . CSS-这种样式基本上与默认样式表相同，只是它可以更改选择区域的边框，imgareselect-弃用. CSS-仅当您想使用不同意的选项时才使用这种样式表。您只需要在html标题中添加一个样式表。这个css文件夹还包含4张gif图片，用于显示边框。

5.元素和类这个插件通过创建几个div元素来表示选定的区域，包括边框、可调整的手柄和未选定的区域。这些元素已经被分配了特定的类名，因此您可以通过CSS或jQuery选择器来获取和操作它们。类名被分配给对象imgareselect-selection选定区域imgareselect-border 1 imgareselect-border 2 imgareselect-border 3 imgareselect-border 4选择区域的四个边框。由四个div组成的imgaraeselecte-handle可以改变调节手柄的大小(四个或八个div，如果未启用，将不会显示)。imgareselect-outer没有选定区域，由四个div组成。下面的对象图显示了这个插件的这些元素是如何排列的：。

前缀“imgareaselect”是默认前缀，可以通过“classPrefix”选项进行修改。当有许多选择框需要单独操作(如更改样式)时，这尤其有用。00-1010回调函数(设置了on init、onselectstart、on select change或onSelectEnd选项时)接收两个参数，第一个选项是对此插件应用的图像的引用，另一个选项是呈现当前选中的对象，该对象有六个属性。属性描述x1 y1选择区域左上角的坐标x2 y2选择区域右下角的坐标选择区域的宽度选择区域的高度选择区域的高度为了便于理解，下面是选择后执行的回调函数的示例：$ ('img # photo ')。IMgareSelect({在select end:函数(img，selection)上){ alert(' width : ' selection . width '；height : ' selection . height)；} });00-1010如果选项‘keys’设置为true，那么我们可以通过按键盘上的键来选择框的移动。可以使用以下按键，默认功能如下：按键动作箭头键每次移动选择10个像素Shift箭头键每次移动选择1个像素Ctrl箭头键每次扩展和收缩选择10个像素Ctrl Shift箭头键每次扩展和收缩选择1个像素。当然，您也可以通过自己设置“键”选项来覆盖默认的键设置。该对象具有以下属性：设置方向的属性描述功能Shift设置Shift键Ctrl设置Ctrl键Alt设置Alt键每个属性通过设置一个数值(以像素为单位，数值不应小于1)来指示按下该键时将移动/改变多少像素，或者通过将其值指定为“字符串”来指定其为“调整大小”模式。例如：$ ('img #示例')。imgareserve({ keys : { arrows : 15，ctrl 3360 5，shift : ' resize ' } })；在本例中，它被设置为“箭头键将选定区域移动15个像素，按住Ctrl键将移动5个像素，按住Shift键将切换到调整大小模式”。如果有多个图像，并且您自己修改了密钥设置，则此自定义设置将仅应用于一个图像。一般来说，当图像被“激活”(用鼠标点击)时，图像将使用自定义按钮设置。00-1010插件还提供了多种API方法来扩展其应用，并可以通过这些API方法与其他web应用进行组合。为了使用这些方法，首先需要一个插件对象，这可以通过调用imgareselect()函数并将其选项“instance”设置为true来实现：var IAS=$ ('# photo ')。imgareserve({ instance : true })；现在，您可以使用此对象调用公共方法。例如，设置一个默认的预定义范围：IAS。setselection (50，50，150，200，true)；IAS . SetOptions({ show : true })；IAS . update()；一旦初始化完成，就可以使用这些API方法。列出了以下API方法：方法描述getoptions getoptions()-返回当前选项的配置Returns:一个包含当前选项配置的对象(通常是JSON对象)setoptionssetoptions(新选项)。-设置插件选项参数： newoptions选项配置对象(通常为JSON对象)getselectioncontextselection([noScale])获取当前选择参数：no scale(可选)如果设置为true，则返回的选择不会缩放。Return:选择区域中的对象setselectionsetselection (x1，y1，x2，y2，[no scale])-设置当前选择区域的参数：x1选择区域左上角的x坐标y1选择区域左上角的y坐标x2选择区域右下角的y坐标y2无比例(可选)-如果设置为true，图像将不会被缩放。注意：此方法仅设置插件中的选择区域。不会立即观察到所选区域的变化，如果需要立即显示变化的区域，必须在使用setSelect()函数后调用update()函数，并让show选项为true。cancel selection cancel selection()-取消当前选择。注意：此方法将隐藏“选中/未选中”区域，因此无需调用update()函数。

updateupdate([resetKeyPress]) -更新插件配置参数： resetKeyPress(可选) 如果设成假的，此实例的按键将复位（即不可用)

、回调函数

、键盘支持

最小宽度、最小宽度、最大宽度以及最大高度选项允许你设置选区的范围。在这个例子中，图像的最大范围将限制为200x150px。$(文档)。ready(function(){ $(' # lady bug _ ant ')).imgareselect({ maxwidth : 200，maxHeight: 150，handles 3360 true })；});

、API方法

配置电子选项就可以了，这里将其设置成4:3':$(文档)。ready(function () { $('#bee ')).imgaraesele({ aspelection : ' 4:3 '，句柄3360 true })；});

二、简单实例

配置x1，y1，x2与y2选项就可以了：$(文档)。ready(function () { $('#duck ')).imgareselect({ x 1: 120，y1: 90，x2: 280，y 2: 210 })；});

、宽度或者高度限制

、固定高宽比

在下面的代码小片断里，onSelectChange()回调函数实现了选择区域预览的效果。官方源代码：http://ody niec。net/projects/imgareservice/examples-callback。html函数预览(img，selection){ var Scalex=100/(selection。宽度| | 1)；var Scaley=100/(选择。高度| | 1)；$(' # ferre div img ').CSS({ width : math。圆形(scaleX * 400)' px '，高度：数学。round(Scaley * 300)“px”，左边距：“-math。圆形(scaleX *选择。x1)“px”，marginto p :“-math。圆形(scaleY *选择。y1)' px ' })；} //这里通过框架语法在原来图片后插入同样的图片$(文档)。ready(function(){ $(' div mg src=' http : ferret。jpg ' style='位置：相对；/div ').css({ float: '左，位置： '相对'飞越： '隐藏宽度： ' 100像素'，高度： ' 100像素' }).在($(' # ferret ')之后插入；$(“# ferret”).imgaraeselection({ aspelection : ' 1:1 '，on select change : preview })；});由于预览窗口是100x100px的，因此当截图窗口小于100像素时，预览图会放大；当截图窗口大于100像素时，预览图会缩小。这两种效果图如下

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是实际图形的高度，要根据实际情况进行调整！)，回调函数中新图形的宽度和高度必须设置正确，否则会出现选择偏差

、设置初始选项区域

。如果需要实现真正的截图功能，就必须使用服务器端的支持，比如php asp aspx jsp。也就是说，在客户端上选择只是第一步。如果需要进一步处理，必须将此选定区域的坐标提交给服务器。那么如何实现呢？创建一个识别，其中有四个隐藏字段：formaction=' 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 '/然后，在初始化imgAreaSelect时，表单使用onSelectEnd()回调函数来分配就像下面的代码：$(文档)。ready (function () {$ ('#瓢虫')。imgaresult({ on select end :函数(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']得到相应的坐标数据。