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

发布于 2020-05-23 21:47:28 字数 3340 浏览 1331 评论 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;
}