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()方法的使用