本示例使用 HTML5 canvas ， 简单 的编写了上传 头像 的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全：
下图为裁剪后的效果：
ht ML 部分：
XM L/HTML Code 复制内容到剪贴板
<!DOCTY PE &nbs p; html > < html lang = "en" > < head > < meta charset = "UTF-8" > < t IT le > 上传头像 </ title > < meta n am e = "renderer" content = " webkit " > < meta name = "viewport" content = "width=device-width, initial -s cale=1.0" > </ head > < body > < div id = " img Crop" style = "width:200px;h ei ght:200px;border:1px solid # ccc;overflow:hidden;" > < img src = "img/ test . jpg " alt = "" > </ div > < input type = "file" accept = "image/*" /> < button id = "save" > 保存 </ button > < p > 下面为剪切的图片: </ p > < div id = "imgShow" > </ div > </ body > </ html >
JavaScript部分：
JavaScript Code 复制内容到剪贴板
VAR $imgCrop = $( "#imgCrop" ); var $img = $imgCrop.find( "img" ); var img = $img[0]; var width = parseInt($imgCrop.css( "width" )); var height = parseInt($imgCrop.css( "height" )); var startX,startY,scale = 1; var x = 0,y = 0; $( "input" ).on( "change" , function (){ var fr = new FileReader(); var file = this .files[0] //console. LOG (file); if (!/image\/\w+/.test(file.type)){ alert(file.name + "不是图片文件！" ); return ; } console.log(file); $img.removeAttr( "height width" ); fr.readAsDataURL(file); fr.onload = function (){ img.src = fr.result; var widthInit = 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; ;m ove($img, x, y); }; }); img.addEventListener( "touchstart" , function (e){ startX = e.t arg etTouches[0].pageX; startY = e.targetTouches[0].pageY; return ; }); img.addEventListener( "touchmove" , function (e){ e.p rev entDefault(); e.stop PR opagation(); var changeX = e.changedTouches[0].pageX - startX + x; var changeY = e.changedTouches[0].pageY - startY + y; move($( this ), changeX, changeY); return ; }); img.addEventListener( "touchend" , function (e){ var changeX = e.changedTouches[0].pageX - startX + x; var changeY = 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 ; }); //确定目标图片的样式 function move(ele, x, y){ ele.css({ '-webkit -t ransform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)' , 'transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)' }); } $( "#save" ).on( "click" , function (){ var url = imageData($img); console.log(url); $( "#imgShow" ).html( "<img src=" +url+ " />" );; }); //裁剪图片 function imageData($img) { var canvas = document.createElement( 'canvas' ); var ctx = canvas.getContext( '2d' ); canvas.width = width ; canvas.height = height; ctx.drawImage(img, -x*scale, -y*scale, width*scale, height*scale, 0, 0, width, height); return canvas.toDataURL(); }
以上就是本文的全部内容，希望对大家的学习有所帮助。
原文： http://www.cnblogs.com/yifengBlog/p/5265598.html
总结
以上是 为你收集整理的 HTML5 canvas实现移动端上传头像拖拽裁剪效果 全部内容，希望文章能够帮你解决 HTML5 canvas实现移动端上传头像拖拽裁剪效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于HTML5 canvas实现移动端上传头像拖拽裁剪效果的详细内容...