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 相关文章推荐
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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实现session自定义会话处理器的方法
2015/01/27 PHP
PHP会话控制实例分析
2016/12/24 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python中os模块详解
2016/10/14 Python
python代码实现ID3决策树算法
2017/12/20 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
会计实习生自我鉴定
2013/12/12 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
计划生育证明格式范本
2014/09/12 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
nginx访问报403错误的几种情况详解
2022/07/23 Servers