php结合imgareaselect实现图片裁剪

引用CSS

/js/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css

引用js

/js/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js
/js/AjaxFileUploaderV2.1/ajaxfileupload.js

html

<div>
  <img src='blank.jpg' id="mainimg">
</div>
<div id="myPreview" >
  <img src="blank.jpg" id="mainimgthumb" />
</div>
  <form name="fmCrop">
    <input type="hidden" name="src_path" value="" />
    <input type="hidden" name="x1" value="" />
    <input type="hidden" name="x2" value="" />
    <input type="hidden" name="y1" value="" />
    <input type="hidden" name="y2" value="" />
    <input type="submit" name="btnSubmit" class="baseinf_but1" style="display:none" value="确定" />
  </form>

jQuery代码

$("#mainimg_src", content).load(function () {
    crop($("#mainimg", content));
   });

   function crop($img) { //$img是
             //缩小比例
             var scalex =$img.width() / $("#mainimg_src").width();
             var scaley =$img.height() / $("#mainimg_src").height();

             $img.imgAreaSelect({
               x1:0,y1:0,x2:150,y2:150,
               handles: true, aspectRatio: '1:1',
               onSelectEnd: function (img, selection) {
                 var scaleX = 100 / (selection.width || 1);
                 var scaleY = 100 / (selection.height || 1);

                 $('#mainimgthumb').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'
                 });
                 $('input[name="x1"]', content).val(selection.x1/scalex);
                 $('input[name="y1"]', content).val(selection.y1/scaley);
                 $('input[name="x2"]', content).val(selection.x2/scalex);
                 $('input[name="y2"]', content).val(selection.y2/scaley);
               }
             });
           }

确定裁剪

          //确定剪切
$("form[name=fmCrop]", content).submit(function () {
  var data = $("form[name=fmCrop]", content).serializeArray();
  $.get('/members/web-members-rest/crop.html', data, function (r) {
    switch (r.result) {
       case "Success":
         jAlert("操作成功");
         $("#left_mainimg").attr("src", "/" + r.path + '?a=' + (new Date()).format('yyyyMMddhhmmss'));
         $("#myPreview", content).css("display", "block");
         $("#myPreview", content).prev().css("display", "none");
         $("#mainimg", content).imgAreaSelect({ hide: true });
         $("form[name=fmUpload]", content).css("display", "none");
         $("input[name=btnSubmit]", content).css("display", "none");
         break;
        }
  });
  return false;
});

服务器端php代码

public function actionCrop($src_path,$x1,$x2,$y1,$y2){
    $pic =$src_path;

    $width = $x2-$x1;
    $height = $y2-$y1;

    $type=exif_imagetype($pic); //判断文件类型
    $support_type=array(IMAGETYPE_JPEG , IMAGETYPE_PNG , IMAGETYPE_GIF);
    if(!in_array($type, $support_type,true)) {
      echo "this type of image does not support! only support jpg , gif or png";
      exit();
    }
    switch($type) {
      case IMAGETYPE_JPEG :
        $image = imagecreatefromjpeg($pic);
        break;
      case IMAGETYPE_PNG :
        $image = imagecreatefrompng($pic);
        break;
      case IMAGETYPE_GIF :
        $image = imagecreatefromgif($pic);
        break;
      default:
        echo "Load image error!";
        exit();
    }

    $copy = $this->PIPHP_ImageCrop($image, $x1, $y1, $width, $height);//裁剪

    imagejpeg($copy, $src_path); //替换新图
    return ['result'=>'Success','path'=>$src_path]; //返回新图地址
  }
  function PIPHP_ImageCrop($image, $x, $y, $w, $h){
    $tw = imagesx($image);
    $th = imagesy($image); 

    if ($x > $tw || $y > $th || $w > $tw || $h > $th) return FALSE; 

    $temp = imagecreatetruecolor($w, $h);
    imagecopyresampled($temp, $image, 0, 0, $x, $y, $w, $h, $w, $h);
    return $temp;
  }

以上所述就是本文的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • PHP图片处理之使用imagecopyresampled函数裁剪图片例子

    图片裁剪是指在一个大的背景图片中裁剪出一张指定区域的图片,常见的应用是在用户设置个人头像时,可以从上传的图片中,裁剪出一个合适的区域作为自己的个人头像图片.图像裁剪和图片缩放的相似,所以也是借助imagecopyresampled()函数去实现这个功能.同样也是以JPEG图片格式为例,声明一个图像裁剪函数cut(),代码如下所示: 复制代码 代码如下: <?php     //在一个大的背景图片中裁剪出指定区域的图片,以jpeg图片格式为例     function cut($filename,

  • PHP实现图片裁剪、添加水印效果代码

    3.PHP对图像的裁剪 <div> <h4>裁剪之前</h4> <img src="1.png" style="border:1px solid red;"> </div> <?php header("content-type","text/html;charset=utf-8"); /* *图片裁剪 *@param string $filename 图片的ur

  • PHP加Nginx实现动态裁剪图片方案

    许久以前写过一篇也是关于高性能PHP图片动态裁剪方案的文章,那文章使用的是nginx Cache和rewrite实现的,当然再加上CDN,那个方案存在一个问题就是图片并没有实际生成,而是以二进制的形式存在缓存中.如果缓存失效了那么还需要请求php再次生成.如果说到区别这是我暂且认为的吧.利用空余时间,新增了静态生成图片支持,支持对图片3种模式切换,在门户网站自动对图片尺寸进行裁剪,减少服务器带宽,理论上应该也满足了业务的需求吧,图片裁剪使用了Imagick组件. 一.思路再现:1.先写好请求服务

  • PHP 裁剪图片成固定大小代码方法

    做一个首页调用图像,有时候往往需要获得固定大小的图像,因为首页的图像位置通常由设计人员指定好了,如果是做最新发布图像调用,因为不知道客户会上传什么比例的图像,所以,有时候也就没有办法确定图像的比例,前台页面编写人员通常会采用固定 img 元素高宽的办法来达到控制图像不溢出,但如果图像的比例不是需要的比例,就会造成图像调用后变形,很大程度上影响了页面的美观,有解决的方法是,按照原图比例进行缩放,缩放后的图像难免会有空白,空白处填以颜色,这样虽然图像不变形了,但这样会有很多问题,比如,如果用户发一个

  • PHP实现的自定义图像居中裁剪函数示例【测试可用】

    本文实例讲述了PHP实现的自定义图像居中裁剪函数.分享给大家供大家参考,具体如下: 图像居中裁减的大致思路: 1.首先将图像进行缩放,使得缩放后的图像能够恰好覆盖裁减区域.(imagecopyresampled - 重采样拷贝部分图像并调整大小) 2.将缩放后的图像放置在裁减区域中间.(imagecopy - 拷贝图像的一部分) 3.裁减图像并保存.(imagejpeg | imagepng | imagegif - 输出图象到浏览器或文件) 具体代码: //==================

  • PHP图像裁剪缩略裁切类源码及使用方法

    最近在做网页拖拽验证码的开源项目,需要在服务端生成图片对应的可移动的色块,但是网上的资源都是做缩略图,对整个图片进行缩放的,所以自己动手,完成了对图片进行裁剪小块的工具 <?php namespace App\Libs; /** * 2016-01-07 15:54:58 * Lixiaoyu * * mode 1 : 强制裁剪,生成图片严格按照需要,不足放大,超过裁剪,图片始终铺满 * mode 2 : 和1类似,但不足的时候 不放大 会产生补白,可以用png消除. * mode 3 : 只缩

  • JQuery PHP图片在线裁剪实例

    / * Goofy 2011-11-29 * 图像处理:根据传递过来的坐标参数,x,y,w,h,依次为选取的x坐标,y坐标,w宽度,h高度 通过imagecopy()方法将该区域copy至第一步创建的空白图像中 注意,在创建图像的时候要用imagecreatetruecolor()真彩色,不然用imagecreate()图片会失真 */ 自由图片剪切 无比例 <?php /** * Goofy 2011-11-29 * 图像处理:根据传递过来的坐标参数,x,y,w,h,依次为选取的x坐标,y坐标

  • thinkPHP框架实现图像裁剪、缩放、加水印的方法

    本文实例讲述了thinkPHP框架实现图像裁剪.缩放.加水印的方法.分享给大家供大家参考,具体如下: ThinkPHP 图片处理函数,需要文字水印字体,可在windows下 控制面板 > 大图标(右上角) > 字体 找到需要的字体 /** * 图像的裁剪.缩放.加水印 * @param string $path 路径 * @param int $width 裁剪的宽度/限制的高度或宽度,当有$height值时此值为图片的宽度,否则为限制的宽度或高度 * @param int $height [

  • php使用imagick模块实现图片缩放、裁剪、压缩示例

    PHP 使用Imagick模块 缩放,裁剪,压缩图片 包括gif图片 缩放 裁剪 复制代码 代码如下: /**  * 图片裁剪  * 裁剪规则:  *   1. 高度为空或为零   按宽度缩放 高度自适应  *   2. 宽度为空或为零  按高度缩放 宽度自适应  *      3. 宽度,高度到不为空或为零  按宽高比例等比例缩放裁剪  默认从头部居中裁剪  * @param number $width  * @param number $height  */ public function

  • PHP图片裁剪函数(保持图像不变形)

    为了完成图片上传之后自动的裁剪,然后在前台显示出裁剪出的图片.需求如上,源码如下: 复制代码 代码如下: <? *exif_imagetype -- 判断一个图像的类型 *说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ // 获得任意大小图像,不足地方拉伸,不产生变形,不留下空白         function my_image_resize($src_file, $dst_f

  • 使用gd库实现php服务端图片裁剪和生成缩略图功能分享

    裁剪示例: 最终裁剪成的图片: 其中虚线框内就是要裁剪出来的图片,最终保存成100宽的图片.代码如下: 复制代码 代码如下: $src_path = '1.jpg';//创建源图的实例$src = imagecreatefromstring(file_get_contents($src_path)); //裁剪开区域左上角的点的坐标$x = 100;$y = 12;//裁剪区域的宽和高$width = 200;$height = 200;//最终保存成图片的宽和高,和源要等比例,否则会变形$fi

  • php+js实现图片的上传、裁剪、预览、提交示例

    首先用到的语言是php.插件imgareaselect(下载地址),没有太多花哨的样式,index.php代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

随机推荐