imgAreaSelect 中文文档帮助说明

2020-05-23 06:08:16易采站长站整理


【证据二】在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’]等就得到相应的坐标数据了。