php结合imgareaselect实现图片裁剪


Posted in Javascript onJuly 05, 2015

引用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; 
  }

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

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
React快速入门教程
Jan 17 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
js实现抽奖的两种方法
Mar 19 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 #Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 #Javascript
IE浏览器下PNG相关功能
Jul 05 #Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 #Javascript
javascript实现控制的多级下拉菜单
Jul 05 #Javascript
javascript遇到html5的一些表单属性
Jul 05 #Javascript
浅谈angularJS 作用域
Jul 05 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
延长phpmyadmin登录时间的方法
2011/02/06 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
详解在Python和IPython中使用Docker
2015/04/28 Python
Python实现高效求解素数代码实例
2015/06/30 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python如何使用unittest测试接口
2018/04/04 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
信息管理员岗位职责
2013/12/01 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
安全承诺书格式
2014/05/21 职场文书
病假证明模板
2015/06/19 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
《法国号》教学反思
2016/02/22 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书