HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法
这篇文章主要介绍HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司是一家专注于网站建设、成都网站制作与策划设计,监利网站建设哪家好?创新互联公司做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:监利等地区。监利做网站价格咨询:13518219792
本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全:
下图为裁剪后的效果:
html部分:
XML/HTML Code复制内容到剪贴板
上传头像 下面为剪切的图片:
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("");; }); //裁剪图片 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实现移动端上传头像拖拽裁剪效果的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网页题目:HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法
网站地址:http://scjbc.cn/article/gsiieg.html