HTML5 canvas实现移动端上传头像拖拽裁剪效果

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

下图为裁剪后的效果：

htML部分：

1. !DOCTYPE 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部分：

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("img src="+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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！