返回介绍

回调函数示例

发布于 2020-05-23 22:36:29 字数 2414 浏览 993 评论 0 收藏 0

1、选区预览

在下面的代码小片断里,onSelectChange()回调函数实现了选择区域预览的效果。

function preview(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',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });
}
//这里通过jQuery语法在原来图片后插入同样的图片
$(document).ready(function () {
  $('<div><img src="ferret.jpg" style="position: relative;" /><div>')
  .css({
    float: 'left',
    position: 'relative',
    overflow: 'hidden',
    width: '100px',
    height: '100px'
  })
  .insertAfter($('#ferret'));
  $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});

由于预览窗口是100x100px的,因此当截图窗口小于100px时,预览图会放大;当截图窗口大于100px时,预览图会缩小。

需要说明的是,这里制作这种效果使用了一种技巧。最关键的一个是等比率缩放.它需要两个图片,第一图是原图,第二个图是选择区域后显示的图,用第一个图上的选择坐标+css控制产生第二个图,实际上两个图是一样的,只不过通过css控制了第二张图的显示区域与缩放比率。证据如下:

  1. 在$(document).ready()函数中通过insertAfter插入"src"也是"ferret.jpg"的图片。再注意一下,这一段里的"overflow: 'hidden',"这一行代码就是让超过100px高宽的图片额外内容隐藏掉。
  2. 在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'] 等就得到相应的坐标数据了

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文