HTML5canvas achieves the effect of dragging and dropping the uploaded Avatar on the Mobile End _ html5 tutorial tips-

This article describes how to use HTML5canvas to drag and drop a portrait on a mobile terminal and crop it. It is of reference value. If you are interested, you can refer to this example to use HTML5 canvas, you have simply compiled the cropping effect of the uploaded avatar. You can drag and drop the Avatar to crop it. Although the style is not easy to see, the function is still complete:

For the effect after cropping:

Html section:

Copy XML/HTML Code to clipboard

5. Upload Avatar
14. Save

15. The following is the cut image:

JavaScript section:

Copy the content to the clipboard using 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 + "is not an image file! ");
14. Return;
15. }
16. Console. log (file );
17. $ Img. removeAttr ("height width ");
18. Fr. readAsDataURL (file );
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 );
35. };
37. });
39. Img. addEventListener ("touchstart", function (e ){
40. StartX = e.tar getTouches [0]. pageX;
41. StartY = e.tar getTouches [0]. pageY;
43. Return;
45. });
46. Img. addEventListener ("touchmove", function (e ){
47. E. preventDefault ();
48. E. stopPropagation ();
50. Var changeX = e. changedTouches [0]. pageX-startX + x;
51. Var changeY = e. changedTouches [0]. pageY-startY + y;
53. Move ($ (this), changeX, changeY );
54. Return;
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;
61. X = x + e. changedTouches [0]. pageX-startX;
62. Y = y + e. changedTouches [0]. pageY-startY;
64. Move ($ (this), changeX, changeY );
65. Return;
67. });
68. // Determine the target image Style
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. }
76. $ ("# Save"). on ("click", function (){
77. Var url = imageData ($ img );
78. Console. log (url );
80. $ ("# ImgShow" ).html ("+ url +"/> ");;
81. });
82. // Crop an image
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. }

The above is all the content of this article, hoping to help you learn.

Original article: http://www.cnblogs.com/yifengBlog/p/5265598.html