您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍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 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; 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 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实现移动端上传头像拖拽裁剪效果的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。