jQuery+PHP实现上传裁剪图片
程序员文章站
2023-11-28 08:50:10
本文是一个简单的jquery图片预览+裁剪的例子,原理是在前端获取要裁剪的信息,如宽高比、裁剪坐标,上传图片之后在后端php进行切割
jquery代码(必须在最后面引入)...
本文是一个简单的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 裁剪信息數組,包括裁剪后要保存的宽高、图片大小与裁剪开始坐标之比 * @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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。