jQuery+PHP实现上传裁剪图片


Posted in jQuery onJune 29, 2020

本文是一个简单的jquery图片预览+裁剪的例子,原理是在前端获取要裁剪的信息,如宽高比、裁剪坐标,上传图片之后在后端php进行切割

jquery代码(必须在最后面引入)

function showCutImg(showImg){
   var showImg = $(showImg);
   var changeInput = showImg.parents('.showImgDiv').siblings('.CutImage');
   var size = changeInput.siblings('.imgCoord').attr('ratio').split('*');
   var needWidth = size[0];
   var needHeight = size[1];
   var ratio = parseInt(needWidth)/parseInt(needHeight);
   ratio = parseFloat(ratio.toFixed(2));
   var thisFullDiv = showImg.parent();
   var coordArr = changeInput.siblings('.imgCoord').val().split(',');

   thisCutImgWidth = showImg.width();
   thisCutImgHeight = showImg.height()

   thisFullDiv.css('width',thisCutImgWidth);
   thisFullDiv.css('height',thisCutImgHeight);

   if((thisCutImgWidth/thisCutImgHeight)>=ratio){
    var thisCutDivHeight = thisCutImgHeight;
    var thisCutDivWidth = thisCutDivHeight*ratio;
   }else{
    var thisCutDivWidth = thisCutImgWidth;
    var thisCutDivHeight = thisCutDivWidth/ratio;
   }

   var hideWidth = (thisFullDiv.width()-thisCutDivWidth)/2;

   showImg.siblings('.hideImgLeft').width(hideWidth);
   showImg.siblings('.hideImgRight').width(hideWidth);

   var hideHeight = (thisFullDiv.height()-thisCutDivHeight)/2;

   showImg.siblings('.hideImgTop').width(thisCutDivWidth);
   showImg.siblings('.hideImgBottom').width(thisCutDivWidth);

   showImg.siblings('.hideImgTop').height(hideHeight);
   showImg.siblings('.hideImgBottom').height(hideHeight);

   if(hideWidth>0){
    var cutRatioX = thisCutImgWidth/hideWidth;
   }else{
    var cutRatioX = 0
   }

   if(hideHeight>0){
    var cutRatioY = thisCutImgHeight/hideHeight;
   }else{
    var cutRatioY = 0;
   }

   var coord = needWidth+'#'+needHeight+'#'+(cutRatioX)+'#'+(cutRatioY);

   if(coordArr!=''){
    coordArr.push(coord);
   }else{
    coordArr = [coord];
   }

   changeInput.siblings('.imgCoord').val(coordArr);
   $('.fullDiv').on('mousedown',function(e){
    var me = $(this);

    var changeInput = me.parent().siblings('.CutImage');

    var index = me.attr('index');

    var oldx = e.pageX;
    var oldy = e.pageY;

    var imgleft = me.children('.cutImg').position().left;
    var imgtop = me.children('.cutImg').position().top;

    var maxw = me.children('.hideImgLeft').width();
    var maxh = me.children('.hideImgTop').height();

    var goordArr = changeInput.siblings('.imgCoord').val().split(',');

    var cutDivSize = goordArr[index].split('#');

    $(document).mousemove(function(e){
     var newx = e.pageX;
     var newy = e.pageY;

     var movex = newx - oldx;
     var movey = newy - oldy;

     var x = movex + imgleft;
     var y = movey + imgtop;

     if(Math.abs(x)>maxw){
      if(x>0) x = maxw;
      if(x<0) x = -maxw;
     }

     if(Math.abs(y)>maxh){
      if(y>0) y = maxh;
      if(y<0) y = -maxh;
     }

     me.children('.cutImg').css('left',x+'px');
     me.children('.cutImg').css('top',y+'px');

     if(parseInt(maxw - x)>0){
      var cutRatioX = me.children('.cutImg').width()/parseInt(maxw - x);
     }else{
      var cutRatioX = 0;
     }

     if(parseInt(maxh - y)>0){
      var cutRatioY = me.children('.cutImg').height()/parseInt(maxh - y)
     }else{
      var cutRatioY = 0;
     }

     var cutImgPo = (cutRatioX) +'#'+ (cutRatioY);

     var coordVal = cutDivSize[0]+'#'+cutDivSize[1]+'#'+cutImgPo;

     goordArr[index] = coordVal;

     changeInput.siblings('.imgCoord').val(goordArr);


    });
   });


   $(document).on('mouseup',function(e){
    $(document).unbind('mousemove');
   });
  }



  $(".CutImage").change(function(){

   $(this).siblings('.imgCoord').val('');

   if($(this).prop('multiple')!=true){  //判断是否多文件上传
    var objUrl = getObjectURL1(this.files[0]) ;

    var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth');

    if(!showImgWidth)
    {
     showImgWidth = '150';
    }

    if (objUrl) {
      html = '';
      html += '<div style="border:1px solid #000;position:relative;z-index:2;overflow:hidden;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" index="0" class="fullDiv">';
      html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgTop"></div>';
      html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgBottom"></div>';
      html += '<div style="position:absolute;height:100%;background:#ccc;left:0;z-index:4;opacity:0.95;" class="hideImgLeft"></div><div style="position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;margin:auto;" class="cutDiv"></div>';
      html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideImgRight"></div>';
      html += '<img style="position:absolute;z-index:1;width:'+showImgWidth+'px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl+'" alt="图片加载失败" />';
      html += '</div>';          

      $(this).siblings('.showImgDiv').html(html);
    }

   }else{
    var objUrl = getObjectURL2($(this).get(0).files);
    if (objUrl) {

     var showImgWidth = $(this).siblings('.showImgDiv').attr('showImgWidth');

     if(!showImgWidth)
     {
      showImgWidth = '150';
     }

     var html = '';
     for(var i=0;i<objUrl.length;i++)
     {
      html += '<div style="margin-bottom:5px;border:1px solid #000;position:relative;z-index:2;overflow:hidden;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;" index="'+i+'" class="fullDiv">';
      html += '<div style="position:absolute;background:#ccc;top:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgTop"></div>';
      html += '<div style="position:absolute;background:#ccc;bottom:0;z-index:4;opacity:0.95;left:0;right:0;margin:auto;" class="hideImgBottom"></div>';
      html += '<div style="position:absolute;height:100%;background:#ccc;left:0;z-index:4;opacity:0.95;" class="hideImgLeft"></div><div style="position:absolute;z-index:3;left:0;right:0;top:0;bottom:0;margin:auto;" class="cutDiv"></div>';
      html += '<div style="position:absolute;height:100%;background:#ccc;right:0;z-index:4;opacity:0.95;" class="hideImgRight"></div>';
      html += '<img style="position:absolute;z-index:1;width:'+showImgWidth+'px" onload="showCutImg(this)" class="cutImg" class="imgshover" src="'+objUrl[i]+'" alt="图片加载失败" />';
      html += '</div>';          //修改img标签的width样式可改变预览图大小

     }

     $(this).siblings('.showImgDiv').html(html);

    }

    //$('.fullDiv').css('float','left');
   }


  }) ;

  //建立一??可存取到?file的url
  function getObjectURL1(file) {
   var url = null ; 
   if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file) ;
   } else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file) ;
   } else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file) ;
   }
   return url ;
  }

  //建立一??可存取到?file的url
  function getObjectURL2(file) {
   var url = new Array(); 
   if (window.createObjectURL!=undefined) { // basic
    for(var i=0;i<file.length;i++)
    {
     url[i] = window.createObjectURL(file[i]) ;
    }
   } else if (window.URL!=undefined) { // mozilla(firefox)
    for(var i=0;i<file.length;i++)
    {
     url[i] = window.URL.createObjectURL(file[i]) ;
    }
   } else if (window.webkitURL!=undefined) { // webkit or chrome
    for(var i=0;i<file.length;i++)
    {
     url[i] = window.webkitURL.createObjectURL(file[i]) ;
    }
   }
   return url ;
  }

html代码(这些代码要放在同一级)

<!-- 文件上传标签,添加class属性CutImage -->
<input class="CutImage" type="file" name="img" />

<!-- 传送图片裁剪比例等参数,要添加class属性imgCoord,ratio为裁剪后要保存的宽高width*height -->
<input ratio="100*100" type="hidden" class="imgCoord" name="imgCoord">

<!-- 图片预览,要添加class属性showImgDiv,showImgWidth表示预览时的宽度 -->
<div showImgWidth="100" class="showImgDiv"></div>

php代码

/*图片上传代码略 下面直接进行图片裁剪*/

/**
 * [cut_img 图片裁剪函数]
 * Author: 程威明
 * @param array $imgs   图片路径数组
 * @param array $info   裁剪信息?到M,包括裁剪后要保存的宽高、图片大小与裁剪开始坐标之比
 * @param bool $cover   是否覆盖原图,默认不覆盖
 * @return array    若覆盖原图返回裁剪数量,不覆盖返回图片路径组成的数组
 */
function cut_img($imgs=array(),$infoarr=null,$cover=false)
{
 if($infoarr==null) return $imgs;

 //判断是否为数组(必须是一个以图片路径组成的数组)
 $imgs = is_array($imgs)?$imgs:array($imgs);

 //把多个裁剪信息切成单个信息组成的数组
 $infoarr = explode(',', $infoarr);

 $save_file = array();

 $i=0;
 foreach($imgs as $file){

  //如果不覆盖原图,可重新定义图片保存路径
  if(false==$cover){
   $file = $file;
  }

  //把裁剪信息切割成数组,第一个为要保存的宽第二个为要保存的高,第三和第四个为图片宽高与裁剪起点的比例
  $info = explode('#', $infoarr[$i]);

  //裁剪宽高比
  $ratio = $info[0]/$info[1];

  //判断图片是否存在
  if(!file_exists($file)) continue;

  //获取图片信息
  $imgize = getimagesize($file);

  //图片宽度
  $width = $imgize[0];
  //图片高度
  $height = $imgize[1];

  //图片裁剪起点坐标
  $x = $info[2]==0?0:$imgize[0]/$info[2];
  $y = $info[3]==0?0:$imgize[1]/$info[3];

  //判断图片原宽高比与裁剪宽高比的大小
  if($width/$height>=$ratio){
   $width = $height*$ratio;//如大于即为裁剪宽度
  }else{
   $height = $width/$ratio;//如小于即为裁剪高度
  }

  //裁剪的??高不能超出?D片大小
  if(($width+$x)>$imgize[0]){
   $width = $width-($width+$x-$imgize[0]);
  }

  if(($height+$y)>$imgize[1]){
   $height = $height-($height+$y-$imgize[1]);
  }

  //创建源图的实例
  $src = imagecreatefromstring(file_get_contents($file));

  //??建一???D像
  $new_image = imagecreatetruecolor($info[0], $info[1]);

  //分配颜色
  $color = imagecolorallocate($new_image,255,255,255);
  //定义为透明色
  imagecolortransparent($new_image,$color);
  //填充图片
  imagefill($new_image,0,0,$color);

  //拷贝图片并保存成指定大小
  imagecopyresized($new_image, $src, 0, 0, $x, $y, $info[0], $info[1], $width, $height);

  //保存

  if(false==$cover){
   $file = rtrim(dirname($file),'/').'/c_'.basename($file);
   $save_file[] = $file;
  }

  imagejpeg($new_image,$file);

  imagedestroy($new_image);
  imagedestroy($src);

  $i++;
 }

 if(false==$cover){
  return $save_file;
 }else{
  return $i;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 #jQuery
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
You might like
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
tensorflow之并行读入数据详解
2020/02/05 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
请说出几个常用的异常类
2013/01/08 面试题
信息技术专业个人自我评价
2013/12/11 职场文书
化学教师教学反思
2014/01/17 职场文书
美术教师个人总结
2015/02/06 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
Python中的pprint模块
2021/11/27 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android