HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
本示例使用HTML5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全：
下图为裁剪后的效果：
html部分：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传头像</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="imgCrop" style="width:200px;height:200px;border:1px solid #ccc;overflow:hidden;"> <img class="lazy" data-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.class="lazy" data-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; 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(); 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-transform' : '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 class="lazy" data-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(); }以上是“HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
