jQuery plug-in imgAreaSelect example explanation

About ImgAreaSelect, it is a jQuery plug-in that supports users to select part of an image by dragging the mouse, such as image dragging, image editing, etc. This article will introduce you to the basic explanation of the jQuery plug-in imgAreaSelect. Friends who need it can refer to it. I hope it can help you.

About ImgAreaSelect, it is a jQuery plug-in that supports users to select part of an image by dragging the mouse, such as image dragging, image editing, etc.~~ Let’s take a closer look

1. Download the imgAreaSelect plug-in first

Download address:

English: http://odyniec.net/projects/imgareaselect/

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

Quote in the head:

<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. There are three style sheets in the downloaded plug-in

imgareaselect-default.css – this is Default style sheet,

imgareaselect-animated.css - This style is basically the same as the default style sheet, except that it can change the selection area border

imgareaselect-deprecated.css - Only Use this stylesheet only if you want to use disapproved options.

You only need to add one of the style sheets to the html head. This css folder also contains 4 gif images, which are used to display borders.

3. The element distribution is as shown in the figure

This plug-in represents the selection area by creating several p elements, including borders, adjustable handles and un Selected area. These elements have been assigned specific class names, so you can obtain and manipulate them through CSS or jQuery selectors.

The prefix "imgareaselect" is the default prefix and can be modified through the "classPrefix" option. This is especially useful when there are many select boxes that need to be manipulated individually (such as changing styles).

4. Options

Users can customize many aspects of this plug-in. Users can achieve this purpose through plug-in options (these options will be in the plug-in) It takes effect during initialization). The options include:

##minHeightminWidth

Option	Description
##aspectRatio	The aspect ratio will remain unchanged when selecting in the future. e.g. "4:3"
autoHide	If set to true, then in The area will disappear after selection. Default:false
classPrefix	Give the prefix of the plug-in element in advance (see below for details: 5. Elements and classes) Default:imgareaselect
disable	If set to true, this The plugin will have no effect (but the image will still be visible)
enable	If set to true, this plugin It will work again
##fadeSpeed	If it is set to a number greater than zero, it will "fade out" /Fade out" this plug-in Default:true
handles	If set to true , display the change box when changing the size (that is, there are some small "rectangles" at the corners) Default:false
hide	If set to true, the selection box will be hidden
imageHeight	The real height of the image (because it may be scaled by CSS)
imageWidth	The real width of the image (because it may be bloomed by CSS)
instance	If Set to true, the imgAreaSelect() function will return a reference to the selected area image to enable further use of the API. (See 8. API methods for details)
keys	Enable/disable keyboard support (see 7. Keyboard for details Supported) Default:false
##maxHeight	Limit selection box (in pixels ), set the maximum and minimum height and width.
maxWidth
##movable	Set whether to support selection box movement Default:true
parent	Specifies the parent element to which this plugin is attached by default Default:body
persistent	If set to true, clicking outside the selection area will start a new option (in other words, whether to allow the user to only move/zoom Select area) Default:false
remove	If set to true, the The plugin will be removed completely
resizable	Determines whether the selection area can be resized Default :true
resizeMargin	"Resizable" mode will be enabled when the selection area is wider than how many pixels wide
show	If set to true, the selection area will be visible
x1 y1	The coordinates of the upper left corner of the selection box during initialization
x2 y2	The coordinates of the lower right corner of the selection box during initialization
zIndex	Set the z- of the element acted upon by this plug-in The value of index. Under normal circumstances, imgAreaSelect can always automatically calculate its value, but in rare cases it is still necessary to set it.
onInit	Function called when the plug-in is initialized (see 6. Callback function for details)
onSelectStart	Function called when starting selection (see 6. Callback function for details)
onSelectChange	Function called when changing the selection area (see 6. Callback function for details)
onSelectEnd	Function called when the selection ends (see 6. Callback function for details)

5、回调函数

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

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

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

6、键盘支持

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

每个属性通过设置数值（以像素为单位，数值要不小于１），表明当按下此键时移动/改变大小多少像素，或者指定其值为"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方法：

二、简单实例

１、宽度或者高度限制

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

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

２、固定高宽比

配置aspectRatio选项就可以了，这里将其设置成"４：３"：

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

３、设置初始选项区域

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

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

三、回调函数示例

１、选区预览

在下面的代码小片断里，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 + p > 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 () {
$('<p><img src="ferret.jpg" style="position: relative;" /><p>')
.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是实际图的高，要根据实际情况调整！）,回调函数中新图的宽高这些参数必须设置正确、否则会出现 选择偏差

２、提交选区的坐标

如果需要实现真正截图功能必须使用服务器端支持，例如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实现获得选择域的图像信息

imgAreaSelect 中文文档帮助说明_jquery

javascript截图 jQuery插件imgAreaSelect使用详解_jquery

The above is the detailed content of jQuery plug-in imgAreaSelect example explanation. For more information, please follow other related articles on the PHP Chinese website!