在線圖片裁剪（兼容IE8）

現(xiàn)在很多網(wǎng)站都需要用戶上傳頭像，而用戶電腦里的圖片通常不是需求的規(guī)格，因此在線圖片裁剪功能的需求就誕生了?，F(xiàn)代瀏覽器上很容易實(shí)現(xiàn)，但是在IE8上就比較麻煩。首先要接解決圖片的本地預(yù)覽問(wèn)題，然后再解決操作兼容的問(wèn)題，最后才是裁剪的問(wèn)題。 實(shí)際上用IE8做純前端的裁剪是不現(xiàn)實(shí)的，最終裁剪的步驟只能交給后端。但是計(jì)算坐標(biāo)，和圖片預(yù)覽在前端可以做到。IE8上可以使FILE控件的一個(gè)BUG來(lái)取得本地文件的路徑。用AlphaImageLoader濾鏡來(lái)加載本地圖片。然后交給用戶操作，最后把縮放、坐標(biāo)等，一些參數(shù)和圖片一起傳到服務(wù)器，由服務(wù)器來(lái)裁剪。 現(xiàn)代瀏覽器可以用Canvas直接在前端做裁剪，最后生成DataURL的。而且圖片的本地預(yù)覽也有FileReader這個(gè)API可以用，所以完全沒(méi)有難點(diǎn)。但這里的例子為了便于和IE8兼容，整個(gè)還是使用了IE8的思路。 這里的服務(wù)器端程序用了PHP，裁剪圖片用了PHP的GD庫(kù)。下面是代碼： <? if($f=$_FILES['f']){ switch($f['type']){ case 'image/png': case 'image/x-png': $img=imagecreatefrompng($f['tmp_name']); break; case 'image/gif': $img=imagecreatefromgif($f['tmp_name']); break; case 'image/jpeg': case 'image/pjpeg': $img=imagecreatefromjpeg($f['tmp_name']); break; default: die('error'); }; extract(array_intersect_key($_POST,array_flip(array('s','x','y','m')))); $m>0&&$s>0 or die('error'); $new=imagecreatetruecolor($m,$m); imagefill($new,0,0,imagecolorallocate($new,255,255,255)); imagecopyresampled($new,$img,0,0,$x/$s,$y/$s,$m,$m,$m/$s,$m/$s); ob_clean(); imagepng($new); $data=ob_get_clean(); $name=md5($data).'.png'; file_put_contents($name,$data); header("Location: $name"); die; }; ?> <style> #panel { float:left; border:1px solid #CCC; position:relative; font-size:0px; overflow:hidden; user-select:none; background:#FFF; text-align:left; } #image { border:1px solid red; display:inline-block; visibility:hidden; transform-origin:left top; } #mask { display:none; position:absolute;z-index:1; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } #point { display:none; border:1px solid #CCC; margin:-1px; position:absolute;z-index:1; cursor:move; } #display { float:left;overflow:hidden; border:1px solid #CCC; margin-left:12px; background:#FFF; } </style> <form target="_blank" method="post" enctype="multipart/form-data"> <div id="panel"> <div id="image"></div> <div id="mask"></div> <div id="point"></div> </div> <div id="display"> <div id="wrap"></div> </div> <input type="file" name="f" /> <input type="hidden" name="s" /> <input type="hidden" name="x" /> <input type="hidden" name="y" /> <input type="hidden" name="m" /><br/> <input type="submit" value="上傳" /> </form> <script> onload=function(){ //獲取元素 var panel=document.getElementById("panel"); var image=document.getElementById("image"); var mask=document.getElementById("mask"); var point=document.getElementById("point"); var display=document.getElementById("display"); var wrap=document.getElementById("wrap"); var file=document.querySelector("input[type=file]"); var submit=document.querySelector("input[type=submit]"); var form=document.forms[0]; //基本參數(shù)初始化 var PANELSIZE=300,DISPLAYSIZE=128; panel.style.width=PANELSIZE+"px"; panel.style.height=PANELSIZE+"px"; mask.style.border=PANELSIZE+"px solid #CCC"; mask.style.margin=-PANELSIZE+"px"; display.style.width=DISPLAYSIZE+"px"; display.style.height=DISPLAYSIZE+"px"; var pointsize=DISPLAYSIZE,x=0,y=0,mirro; //提交 submit.onclick=function(){ document.querySelector("input[name=s]").value=mirro.s; document.querySelector("input[name=x]").value=-parseFloat(wrap.style.marginLeft); document.querySelector("input[name=y]").value=-parseFloat(wrap.style.marginTop); document.querySelector("input[name=m]").value=DISPLAYSIZE; }; //事件操作兼容 var on,off; if(-[1,]) on=function(e,n,f){e.addEventListener(n,f);}, off=function(e,n,f){e.removeEventListener(n,f);}; else on=function(e,n,f){e.attachEvent("on"+n,f);}, off=function(e,n,f){e.detachEvent("on"+n,f);}; //選擇文件 on(file,"change",function(){ //加載圖片文件 if(file.files){ //現(xiàn)代瀏覽器使用FileReader加載 var reader=new FileReader; reader.readAsDataURL(file.files[0]); reader.onload=function(){ var path=reader.result,img=new Image; img.onload=function(){ image.style.background="url("+path+") no-repeat"; init(img.width,img.height); },img.src=path; }; }else{ //低版本IE使用AlphaImageLoader濾鏡加載 //無(wú)法直接獲取到文件的本地路徑，只能通過(guò)選區(qū)（這是個(gè)IE的BUG） file.select(),file.blur(); //不調(diào)用blur的話IE9會(huì)出錯(cuò) var path=document.selection.createRange().text; image.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"')"; setTimeout(function(){ init(image.offsetWidth-2,image.offsetHeight-2); },100); }; //圖片加載成功后展示圖片 function init(w,h){ if(point.offsetWidth==0){ mask.style.display=point.style.display="block"; x=0,y=0; }; var m=Math.max(w,h),s=PANELSIZE/m; image.w=w,image.h=h,image.s=s; scale(image,s); image.style.width=w+"px"; image.style.height=h+"px"; image.style.borderWidth="0px"; image.style.visibility="visible"; resize(); }; }); //拖動(dòng)裁剪區(qū)域 on(point,"mousedown",function(e){ var e=e||event; var px=x-e.clientX,py=y-e.clientY; var mouseup,mousemove; on(document,"mouseup",mouseup=function(){ off(document,"mouseup",mouseup); off(document,"mousemove",mousemove); }),on(document,"mousemove",mousemove=function(e){ var e=e||event; move(px+e.clientX,py+e.clientY); }); }); //滾輪控制裁剪區(qū)域縮放 point["onwheel" in point?"onwheel":"onmousewheel"]=function(e){ var e=e||event; var delta=(e.wheelDelta?e.wheelDelta/-120:e.deltaY/3)*4; var value=pointsize+delta; if(value<32||value>PANELSIZE)return; pointsize=value; move(x-delta/2,y-delta/2); resize(); if(e.preventDefault)e.preventDefault(); return false; }; //其它操作函數(shù)定義 function move(ux,uy){ var m=PANELSIZE-pointsize; x=Math.min(Math.max(ux,0),m); y=Math.min(Math.max(uy,0),m); mask.style.left=point.style.left=x+"px"; mask.style.top=point.style.top=y+"px"; var ratio=Math.max(image.w,image.h)*wrap.firstChild.s; wrap.style.marginLeft=-(wrap.x=ratio*x/PANELSIZE)+"px"; wrap.style.marginTop=-(wrap.y=ratio*y/PANELSIZE)+"px"; }; function resize(){ mask.style.width=mask.style.height= point.style.width=point.style.height= pointsize+"px"; mirro=image.cloneNode(); scale(mirro,mirro.s=image.s*DISPLAYSIZE/pointsize); wrap.innerHTML=""; wrap.appendChild(mirro); move(x,y); }; function scale(e,s){ if("zoom" in e.style)e.style.zoom=s; else e.style.transform="scale("+s+")", e.style.marginRight=-e.w*(1-s)+"px", e.style.marginBottom=-e.h*(1-s)+"px"; }; }; </script> 本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

本文題目：在線圖片裁剪（兼容IE8）
本文來(lái)源：http://muchs.cn/news43/311693.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、定制網(wǎng)站、關(guān)鍵詞優(yōu)化、云服務(wù)器、營(yíng)銷型網(wǎng)站建設(shè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)