星空网 > 软件开发 > 网页设计

html5 上传头像的裁剪

本示例使用HTML5 canvas,简单的编写了上传头像的裁剪效果,移动端支持拖拽后裁剪, 虽然样式不好看,但是功能还算全:

下图为裁剪后的效果:

html5 上传头像的裁剪

html部分:

<!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='/images/loading.gif' data-original="img/test.jpg" ></div><input type="file" accept="image/*" /><button id="save">保存</button><p>下面为剪切的图片:</p><div id="imgShow"></div></body></html>

JavaScript部分:

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;var x = 0,y = 0;$("input").on("change",function(){  var fr = new FileReader();  var file = this.files[0]  //console.log(file);  //console.log(file.size);  if(!/image\/\w+/.test(file.type)){    alert(file.name + "不是图片文件!");    return;  }  fr.readAsDataURL(file);  fr.onload = function(){    img.src = fr.result;    x = (img.width - width) > 0 ? (width - img.width)/2 : 0;    y = (img.height - height) > 0 ? (height - img.height)/2 : 0;    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='/images/loading.gif' data-original="+url+" />");;});//裁剪图片function imageData($img) {    var canvas = document.createElement('canvas');    var ctx = canvas.getContext('2d');    canvas.width = "200";    canvas.height = "200";    ctx.drawImage(img, -x, -y, width, height, 0, 0, width, height);    return canvas.toDataURL();  }

 




原标题:html5 上传头像的裁剪

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

美国fba散货:https://www.goluckyvip.com/tag/38056.html
美国fba上海:https://www.goluckyvip.com/tag/38057.html
美国fba什么意思:https://www.goluckyvip.com/tag/38058.html
美国fba时间:https://www.goluckyvip.com/tag/38059.html
美国fba时效:https://www.goluckyvip.com/tag/38060.html
美国fba是啥:https://www.goluckyvip.com/tag/38061.html
跨境支付百科——巴西支付篇:https://www.kjdsnews.com/a/1836648.html
大福地快捷酒店预订 大福酒店怎么走:https://www.vstour.cn/a/365187.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流