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

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

下图为裁剪后的效果：

html部分：

XML/HTML Code复制内容到剪贴板

1. nbsp;html>  
2. html lang="en">  
3. head>  
4.     meta charset="UTF-8">  
5.     title>上传头像title>  
6.     meta name="renderer" content="webkit">  
7.     meta name="viewport" content="width=device-width, initial-scale=1.0">  
8. head>  
9. body>  
10. div id="imgCrop" style="width:200px;height:200px;border:1px solid #ccc;overflow:hidden;">  
11.     img src="img/test.jpg" alt="">  
12. div>  
13. input type="file" accept="image/*" />  
14. button id="save">保存button>  
15. p>下面为剪切的图片:p>  
16. div id="imgShow">div>  
17. body>  
18. html>  

JavaScript部分：

JavaScript Code复制内容到剪贴板

1. var $imgCrop = $("#imgCrop");   
2. var $img = $imgCrop.find("img");   
3. var img = $img[0];   
4. var width = parseInt($imgCrop.css("width"));   
5. var height = parseInt($imgCrop.css("height"));   
6. var startX,startY,scale = 1;   
7. var x = 0,y = 0;   
8. $("input").on("change",function(){   
9.     var fr = new FileReader();   
10.     var file = this.files[0]   
11.     //console.log(file);   
12.     if(!/image\/\w+/.test(file.type)){   
13.         alert(file.name + "不是图片文件！");   
14.         return;   
15.     }   
16.     console.log(file);   
17.     $img.removeAttr("height width");   
18.     fr.readAsDataURL(file);   
19.   
20.     fr.onload = function(){   
21.         img.src = fr.result;   
22.         var widthInit = img.width;   
23.         if(img.width>img.height){   
24.             img.height = height;   
25.             x = (width - img.width)/2;   
26.             y = 0;   
27.         }else{   
28.             img.width = width;   
29.             x = 0;   
30.             y = (height - img.height)/2;   
31.         }   
32.         scale = widthInit/img.width;   
33.         move($img, x, y);   
34.            
35.     };   
36.        
37. });   
38.   
39. img.addEventListener("touchstart",function(e){     
40.     startX = e.targetTouches[0].pageX;   
41.     startY = e.targetTouches[0].pageY;   
42.     
43.     return;     
44.   
45. });    
46. img.addEventListener("touchmove",function(e){     
47.     e.preventDefault();     
48.     e.stopPropagation();     
49.   
50.     var changeX = e.changedTouches[0].pageX - startX + x;   
51.     var changeY = e.changedTouches[0].pageY - startY + y;   
52.   
53.     move($(this), changeX, changeY);   
54.     return;     
55.      
56. });    
57. img.addEventListener("touchend",function(e){      
58.    var changeX = e.changedTouches[0].pageX - startX + x;   
59.     var changeY = e.changedTouches[0].pageY - startY + y;   
60.   
61.     x = x + e.changedTouches[0].pageX - startX;   
62.     y = y + e.changedTouches[0].pageY - startY;   
63.   
64.     move($(this), changeX, changeY);   
65.     return;     
66.      
67. });     
68. //确定目标图片的样式   
69. function move(ele, x, y){   
70.     ele.css({   
71.         '-webkit-transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)',   
72.         'transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)'  
73.     });   
74. }   
75.   
76. $("#save").on("click",function(){   
77.     var url = imageData($img);   
78.     console.log(url);   
79.   
80.     $("#imgShow").html("+url+" />");;   
81. });   
82. //裁剪图片   
83. function imageData($img) {   
84.         var canvas = document.createElement('canvas');   
85.         var ctx = canvas.getContext('2d');   
86.         canvas.width = width ;   
87.         canvas.height = height;   
88.         ctx.drawImage(img, -x*scale, -y*scale, width*scale, height*scale, 0, 0, width, height);   
89.         return canvas.toDataURL();   
90.     }   
91.   

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/yifengBlog/p/5265598.html