imgAreaSelect 功能强大的图片裁切插件 - 文章教程

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

发布于 2020-05-23 字数 3566 浏览 980 评论 0

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

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

使用方法

首先先调用 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;
}

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

nuj316

文章 0 评论 0

梦中楼上月下

文章 2 评论 0

kook

文章 0 评论 0

thousandcents

文章 0 评论 0

像你

文章 1 评论 0