HTML5 canvas实现移动端上传头像拖拽裁剪效果
更新时间:2023-04-03 05:34:47 阅读： 评论：0
本示例使用html5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全：
下图为裁剪后的效果：
html部分：
xml/html code
复制内容到剪贴板
<!doctypehtml><htmllang=“en”><head><metachart=“utf-8”><title>上传头像</title><metaname=“renderer”content=“webkit”><metaname=“viewport”content=“width=device-width,initial-scale=1.0”></head><body><divid=“imgcrop”style=“width:200px;height:200px;border:1pxsolid#ccc;overflow:hidden;”><imgsrc=“img/test.jpg”alt=“”></div><inputtype=“file”accept=“image/*”/><buttonid=“save”>保存</button><p>下面为剪切的图片:</p><divid=“imgshow”></div></body></html>javascript部分：
javascript code
复制内容到剪贴板
var$imgcrop=$(“#imgcrop”); var$img=$imgcrop.find(“img”); varimg=$img[0]; varwidth=parint($imgcrop.css(“width”)); varheight=parint($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; }el{ 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.stoppr倾城之恋简介opagation(); v硕士和博士archangex=e.changedtouches[0].pagex–startx+x; varchangey=e.changedtouches[0].pagey–starty+y; move($(this),changex,changey); return; }); img.addeventlist记叙文要点ener(Rqq安全模式解除20;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(); } 以上就是本文的全部内容，希望对大家的学习有所帮助。
原文：/d/file/titlepic/5265598.html
本文word下载地址：HTML5 canvas实现移动端上传头像拖拽裁剪效果.doc
本文 PDF 下载地址：HTML5 canvas实现移动端上传头像拖拽裁剪效果.pdf
