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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js select option对象小结
Dec 20 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python单元测试unittest实例详解
2015/05/11 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
查看python下OpenCV版本的方法
2018/08/03 Python
python采集微信公众号文章
2018/12/20 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
python 字符串追加实例
2019/07/20 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
中学生校园广播稿
2014/01/16 职场文书
群众路线党课主持词
2014/04/01 职场文书
普通党员对照检查材料
2014/09/24 职场文书
宇宙与人观后感
2015/06/05 职场文书
初中语文教学研修日志
2015/11/13 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python