imgAreaSelect 功能强大的图片裁切插件

发布于 2020-05-23 21:47:28 字数 3340 浏览 1113 评论 0

ImgAreaSelect 是一 jQuery 插件,它支持用户通过鼠标拖曳选择图片的一部分,非常的 fashion。另外,可以在这个选择图像区域的基础上应用网站的其他一些技术,比如图片拖曳、图片编辑等。

使用方法

首先先调用 imgareaselect-default.css、jquery-1.7.1.min.js、imgareaselect.pack.js 这三个文件

<link rel="stylesheet" href="imgareaselect-default.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="imgareaselect.pack.js"></script>

编写下面的 HTML 代码

<img id="selectbanner" src="/pic/banner.jpg" />

调用插件

$('#selectbanner').imgAreaSelect({
  selectionColor: "blue",
  x1: 0,
  y1: 0,
  x2: 950,
  maxWidth: 950,
  minWidth: 950,
  y2: 400,
  minHeight: 400,
  maxHeight: 400,
  selectionOpacity: 0.2,
  onSelectEnd: preview
});

这样即可在该图片元素中使用裁剪功能了,当选框确定之后我们要保存被选择的图片还得自己写代码来操作。下面是当确定好图片区域后点击一个裁剪按钮后的操作:

裁剪确认操作:

$('#sliceButton').click(function () {
  var pic = $('#selectbanner').attr('src');
  var x, y, w, h;
  $.post(
    '/template/sliceBanner',
    {
      x: $('#selectbanner').data('x'),
      y: $('#selectbanner').data('y'),

      w: $('#selectbanner').data('w'),

      h: $('#selectbanner').data('h'),
      pic: pic,
    },
    function (data) {
      //把裁剪后图片加载到原处
      if (data) {
        $('#selectbanner').attr(pic);
      }
    }
  );
});

设置选取框的选取信息,利用jquery中的data方法来保存生成的数据

function preview(img, selection) {
  $('#selectbanner').data('x', selection.x1);
  $('#selectbanner').data('y', selection.y1);
  $('#selectbanner').data('w', selection.width);
  $('#selectbanner').data('h', selection.height);
}

PHP端的主要代码:

function sliceBanner(){
  $x = (int)$_POST['x'];
  $y = (int)$_POST['y'];
  $w = (int)$_POST['w'];
  $h = (int)$_POST['h'];
  $filename = trim($_POST['pic']);
  if(isset($filename) ){
    $uploadBanner =  '/temp'. $filename;
    $sliceBanner = 'upload/'. $filename;
    $src_pic = getImageHander($uploadBanner);
    if(!$src_pic){
      echo 0;exit;
    }
    $dst_pic = imagecreatetruecolor($w, $h);
    imagecopyresampled($dst_pic, $src_pic, 0, 0, $x, $y, $w, $h, $w, $h);
    imagejpeg($dst_pic, $sliceBanner);
    imagedestroy($src_pic);
    imagedestroy($dst_pic);
    echo 1;exit;
  }
  echo 0 ;exit;
}
function getImageHander ($url) {
  $size=@getimagesize($url);
  switch($size['mime']){
    case 'image/jpeg': $im = imagecreatefromjpeg($url);break;
    case 'image/gif' : $im = imagecreatefromgif($url);break;
    case 'image/png' : $im = imagecreatefrompng($url);break;
    default: $im=false;break;
  }
  return $im;
}

相关链接

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

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。