怎么在PHP中使用jQuery实现上传裁剪图片
怎么在PHP中使用jQuery实现上传裁剪图片?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比临清网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式临清网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖临清地区。费用合理售后完善,10多年实体公司更值得信赖。
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 += ''; html += ''; html += ''; html += ''; html += ''; html += ''; html += ''; $(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'; html += ''; html += ''; html += ''; html += ''; html += ''; html += '
html代码(这些代码要放在同一级)
php代码
/*图片上传代码略 下面直接进行图片裁剪*/ /** * [cut_img 图片裁剪函数] * Author: 程威明 * @param array $imgs 图片路径数组 * @param array $info 裁剪信息數組,包括裁剪后要保存的宽高、图片大小与裁剪开始坐标之比 * @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;//如小于即为裁剪高度 } //裁剪的寬高不能超出圖片大小 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)); //創建一個圖像 $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; } }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
当前名称:怎么在PHP中使用jQuery实现上传裁剪图片
本文地址:http://cdiso.cn/article/gghsod.html