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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery实现简易QQ聊天框
Feb 10 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python网络编程实例简析
2014/09/26 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
django rest framework 过滤时间操作
2020/07/12 Python
HTML5标签大全
2016/11/23 HTML / CSS
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
大学新生军训感言
2014/02/25 职场文书
入职担保书范文
2014/05/21 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书