ホームページ > 記事 > ウェブフロントエンド > jQueryプラグインimgAreaSelectサンプル解説
jQueryプラグインimgAreaSelectサンプル解説
- 小云云オリジナル
- 2018-01-10 13:09:081688ブラウズ
ImgAreaSelect については、画像のドラッグや画像編集など、マウスのドラッグによる画像の一部の選択をサポートする jQuery プラグインです。この記事では、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. ダウンロードしたプラグインには 3 つのスタイル シートがあります
imgareaselect-default.css – これはデフォルトのスタイル シートです、
imgareaselect-animated.css – このスタイルは基本的にデフォルトのスタイルシートと同じですが、選択領域の境界線を許可する点が異なります。 変更点
imgareaselect-deprecated.css – このスタイルシートは、非推奨のオプションを使用する場合にのみ使用してください。
HTML ヘッドにスタイル シートを 1 つ追加するだけです。この css フォルダーには、境界線を表示するために使用される 4 つの gif 画像も含まれています。
3. 要素の分布は図に示すとおりです
このプラグインは、境界線、調整可能なハンドル、選択されていない領域など、選択された領域を表すいくつかの p 要素を作成します。これらの要素には特定のクラス名が割り当てられているため、CSS または jQuery セレクターを通じて取得および操作できます。
接頭辞「imgareaselect」はデフォルトの接頭辞であり、「classPrefix」オプションを通じて変更できます。これは、個別に操作する必要がある選択ボックスが多数ある場合 (スタイルの変更など)、特に便利です。
4. オプション
ユーザーは、プラグイン オプションを通じてこの目的を達成できます (これらのオプションは、プラグインが初期化されるときに有効になります)。これらのオプションには次のものが含まれます:
オプション |
説明 |
aspectRatio |
アスペクト比は、今後選択しても変更されません。 例: "4:3" |
autoHide |
trueに設定すると、選択が完了すると領域が消えます。 デフォルト:false |
classPrefix |
プラグイン要素に事前に接頭辞を付けてください（詳細は下記５、要素とクラスを参照） デフォルト:imgaraselect |
|
disable |
設定されている場合true に設定すると、このプラグインは機能しなくなります (ただし、画像は表示されます) |
enable |
true に設定すると、このプラグインは再び機能します |
fadeSpeed |
ゼロより大きい数値に設定すると、「フェード/フェード」プラグインが デフォルト: true |
ハンドル |
trueに設定すると、変更ボックスが表示されますサイズを変更するとき (角に小さな「四角形」がいくつかあります) デフォルト:false |
hide |
trueに設定すると、選択ボックスが非表示になります |
imageHeight |
画像の実際の高さ（CSSによって拡大縮小される可能性があるため） |
imageWidth |
画像の実際の幅（CSSによって拡大縮小される可能性があるため） |
|
instance |
true に設定すると、imgAreaSelect() 関数は、API をさらに使用できるように、選択された領域の画像への参照を返します。 (詳細は８、APIメソッドを参照) |
keys |
キーボードサポートの有効化/無効化(詳細は７、キーボードサポートを参照) デフォルト: false |
maxHeight |
限られた選択肢 ボックス (ピクセル単位)、高さと幅の最大値と最小値を設定します。 |
最大幅 | |
最小高さ | |
最小幅 | |
movable |
選択ボックスの移動をサポートするかどうかを設定します デフォルト:true |
parent |
このプラグインがデフォルトでアタッチされる親要素を指定します Defオルト:ボディ |
persistent |
trueに設定すると、選択領域の外側をクリックすると新しいオプションが開始されます(つまり、ユーザーが選択領域の移動/ズームのみを実行できるかどうか) デフォルト: false |
|
remove |
trueに設定すると、プラグインは完全に削除されます |
resizable |
選択領域のサイズを変更できるかどうかを決定します デフォルト: true |
|
resizeMargin |
Dang 「サイズ変更可能」モードを有効にするために領域の幅が何ピクセルを超えるかを選択します |
show |
trueに設定すると、選択領域が表示されます |
|
x1 y1 |
初期化時の選択ボックスの左上隅の座標 |
|
x2 y2 |
初期化時、選択ボックスの右下隅の座標 |
zIndex |
は、このプラグインが作用する要素のz-index値を設定します。 imgAreaSelect は常にその値を自動的に計算できますが、まれに設定が必要な場合もあります。 |
onInit |
プラグインの初期化時に呼び出される関数（詳細は６のコールバック関数を参照） |
onSelectStart |
選択開始時に呼び出される関数（６を参照）詳細)、コールバック関数) |
onSelectChange |
選択範囲を変更する際に呼び出される関数(詳細は６、コールバック関数を参照) |
onSelectEnd |
選択終了時に呼び出される関数（詳細は６．コールバック関数を参照）
|
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实现获得选择域的图像信息
javascript截图 jQuery插件imgAreaSelect使用详解_jquery
以上がjQueryプラグインimgAreaSelectサンプル解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。