HTML5 canvas實現移動端上傳頭像拖拽裁剪效果

2020-03-24 17:38:58

字體：大中小

來源：轉載

供稿：網友

本示例使用HTML5 canvas，簡單的編寫了上傳頭像的裁剪效果，移動端支持拖拽后裁剪，雖然樣式不好看，但是功能還算全：下圖為裁剪后的效果：html部分：XML/HTML Code復制內容到剪貼板
title 上傳頭像 /title metaname= renderer content= webkit metaname= viewport content= width=device-width,initial-scale=1.0 /head body divid= imgCrop >JavaScript部分：JavaScript Code復制內容到剪貼板
var$imgCrop=$( #imgCrop ); var$img=$imgCrop.find( img ); varimg=$img[0]; varwidth=parseInt($imgCrop.css( width )); varheight=parseInt($imgCrop.css( height )); varstartX,startY,scale=1; varx=0,y=0; $( input ).on( change ,function(){ varfr=newFileReader(); varfile=this.files[0] //console.log(file); if(!/image///w+/.test(file.type)){ alert(file.name+ 不是圖片文件！ ); return; } console.log(file); $img.removeAttr( heightwidth ); fr.readAsDataURL(file); fr.onload=function(){ img.src=fr.result; varwidthInit=img.width; if(img.width img.height){ img.height=height; x=(width-img.width)/2; y=0; }else{ img.width=width; x=0; y=(height-img.height)/2; } scale=widthInit/img.width; move($img,x,y); }; }); img.addEventListener( touchstart ,function(e){ startX=e.targetTouches[0].pageX; startY=e.targetTouches[0].pageY; return; }); img.addEventListener( touchmove ,function(e){ e.preventDefault(); e.stopPropagation(); varchangeX=e.changedTouches[0].pageX-startX+x; varchangeY=e.changedTouches[0].pageY-startY+y; move($(this),changeX,changeY); return; }); img.addEventListener( touchend ,function(e){ varchangeX=e.changedTouches[0].pageX-startX+x; varchangeY=e.changedTouches[0].pageY-startY+y; x=x+e.changedTouches[0].pageX-startX; y=y+e.changedTouches[0].pageY-startY; move($(this),changeX,changeY); return; }); //確定目標圖片的樣式 functionmove(ele,x,y){ ele.css({ '-webkit-transform':'translate3d('+x+'px,'+y+'px,0)', 'transform':'translate3d('+x+'px,'+y+'px,0)' }); } $( #save ).on( click ,function(){ varurl=imageData($img); console.log(url); $( #imgShow ).html( imgsrc= +url+ / );; }); //裁剪圖片 functionimageData($img){ varcanvas=document.createElement('canvas'); varctx=canvas.getContext('2d'); canvas.width=width; canvas.height=height; ctx.drawImage(img,-x*scale,-y*scale,width*scale,height*scale,0,0,width,height); returncanvas.toDataURL(); }
以上就是本文的全部內容，希望對大家的學習有所幫助。原文：http://www.cnblogs.com/yifengBlog/p/5265598.htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html基礎圖像知識詳解

下一篇：html5的自定義data--屬性與jquery的data()方法的使用