在线图片裁剪(兼容IE8)

2024-01-02    分类: 网站建设

现在很多网站都需要用户上传头像,而用户电脑里的图片通常不是需求的规格,因此在线图片裁剪功能的需求就诞生了。现代浏览器上很容易实现,但是在IE8上就比较麻烦。首先要接解决图片的本地预览问题,然后再解决操作兼容的问题,最后才是裁剪的问题。 实际上用IE8做纯前端的裁剪是不现实的,最终裁剪的步骤只能交给后端。但是计算坐标,和图片预览在前端可以做到。IE8上可以使FILE控件的一个BUG来取得本地文件的路径。用AlphaImageLoader滤镜来加载本地图片。然后交给用户操作,最后把缩放、坐标等,一些参数和图片一起传到服务器,由服务器来裁剪。 现代浏览器可以用Canvas直接在前端做裁剪,最后生成DataURL的。而且图片的本地预览也有FileReader这个API可以用,所以完全没有难点。但这里的例子为了便于和IE8兼容,整个还是使用了IE8的思路。 这里的服务器端程序用了PHP,裁剪图片用了PHP的GD库。下面是代码: <? 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]; //基本参数初始化 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){ //现代浏览器使用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滤镜加载 //无法直接获取到文件的本地路径,只能通过选区(这是个IE的BUG) file.select(),file.blur(); //不调用blur的话IE9会出错 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(); }; }); //拖动裁剪区域 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); }); }); //滚轮控制裁剪区域缩放 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; }; //其它操作函数定义 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> 本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司!

本文题目:在线图片裁剪(兼容IE8)
本文来源:https://www.cdcxhl.com/news43/311693.html

成都网站建设公司_创新互联,为您提供品牌网站制作定制网站关键词优化云服务器营销型网站建设微信公众号

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设