HTML5canvas实现移动端上传头像拖拽裁剪效果_html5教程技巧

来源：九五美食网

本示例使用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(); 
  }

全部频道

HTML5canvas实现移动端上传头像拖拽裁剪效果_html5教程技巧