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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery实现拖拽添加元素功能
Dec 01 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
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python的Django框架中的数据过滤功能
2015/07/17 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
详解Python IO口多路复用
2020/06/17 Python
python程序如何进行保存
2020/07/03 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
linux面试题参考答案(9)
2015/01/07 面试题
毕业生自荐书
2014/02/02 职场文书
班组建设经验交流材料
2014/05/12 职场文书
小学数学课题方案
2014/06/15 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
美丽心灵观后感
2015/06/01 职场文书
八年级作文之友情
2019/11/25 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
Python快速实现一键抠图功能的全过程
2021/06/29 Python