jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

这篇文章主要介绍了jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码，非常的简单实用，效果也很棒，有需要的小伙伴可以参考下。

网页端 裁剪图片，不需要经过服务器。

这个是用https://github.com/mailru/FileAPI框架实现的。配合jcrop.

高级浏览器 使用 canvas 裁剪，ie6 7 8使用 flash过度。

核心代码：

1. var el = $('input').get(0); 
2.  
3. seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ 
4.  
5. FileAPI.event.on(el, 'change', function (evt){ 
6. var files = FileAPI.getFiles(evt); // Retrieve file list 
7.  
8. FileAPI.filterFiles(files, function (file, info){ 
9. if( !/^image/.test(file.type) ){ 
10. alert('图片格式不正确'); 
11. return false; 
12. } 
13. else if(file.size > 20 * FileAPI.MB){ 
14. alert('图片必须小于20M'); 
15. return false; 
16. } 
17. else{ 
18. return true; 
19. } 
20.  
21. }, function (files, rejected){ 
22. console.log(files); 
23.  
24. if( files.length ){ 
25. var file = files[0]; 
26. var img0 = FileAPI.Image(file); 
27. var img1 = FileAPI.Image(file); 
28. var ratio = 0; 
29. FileAPI.getInfo(file, function (err, info) { //get image ratio 
30. if (!err) { 
31. if (info.width > info.height) { 
32. ratio = info.width / 500; 
33. } 
34. else { 
35. ratio = info.height / 500; 
36. } 
37. } 
38. }); 
39.  
40. img0.resize(500, 500, 'max') //place image and register jcrop 
41. .get(function(err, img) { 
42. $('#img2').empty(); 
43. $('#img2').append($(img)); 
44.  
45. $('#img2').children().Jcrop({ 
46. aspectRatio: 1, 
47. bgColor: 'rgba(0,0,0,0.4)', 
48. onSelect: function(c) { 
49. img1.matrix.sx = c.x * ratio; 
50. img1.matrix.sy = c.y * ratio; 
51. img1.matrix.sw = c.w * ratio; 
52. img1.matrix.sh = c.h * ratio; 
53. img1.matrix.dw = 500; 
54. img1.matrix.dh = 500; 
55.  
56. img1.get(function(err, img) { 
57. // $('#img3').empty(); 
58. // $('#img3').append($(img)); 
59. $('#img3').html($(img)); 
60. }); 
61.  
62. } 
63. }); 
64. }); 
65. $('#btn').on('click',function(){ 
66. FileAPI.upload({ 
67. // url: '/testUpFile/upFile', 
68. // headers: { 'Content-Type': 'multipart/form-data' }, 
69. files: { images: img1 }, 
70. progress: function (evt){ /* ... */ }, 
71. complete: function (err, xhr){ /* ... */ 
72. //alert(xhr.responseText); 
73. console.log(xhr); 
74. } 
75. });  
76. }); 
77. } 
78. }); 
79. }); 
80. }); 

完整代码：

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <title>TODO supply a title</title> 
5. <meta charset="UTF-8"> 
6. <meta name="viewport" content="width=device-width"> 
7. <script src="./jquery.min.js"></script>  
8. <script src="./jcrop/jquery.Jcrop.min.js"></script> 
9. <link href="./jcrop/jquery.Jcrop.min.css" rel="stylesheet"> 
10. </head> 
11. <style> 
12.  
13. .upload-btn { 
14. width: 130px; 
15. height: 25px; 
16. overflow: hidden; 
17. position: relative; 
18. border: 3px solid #06c; 
19. border-radius: 5px; 
20. background: #0cf; 
21.  
22. } 
23. .upload-btn:hover { 
24. background: #09f; 
25. } 
26. .upload-btn__txt { 
27. z-index: 1; 
28. position: relative; 
29. color: #fff; 
30. font-size: 18px; 
31. font-family: "Helvetica Neue"; 
32. line-height: 24px; 
33. text-align: center; 
34. text-shadow: 0 1px 1px #000; 
35. } 
36. .upload-btn input { 
37. top: -10px; 
38. right: -40px; 
39. z-index: 2; 
40. position: absolute; 
41. cursor: pointer; 
42. opacity: 0; 
43. filter: alpha(opacity=0); 
44. font-size: 50px; 
45. } 
46.  
47. </style> 
48.  
49.  
50. <body> 
51. <div> 
52. <!-- "js-fileapi-wrapper" -- required class --> 
53. <div class="js-fileapi-wrapper upload-btn" id="choose"> 
54.  
55. <input name="files" type="file" multiple /> 
56. <button id="btn">上传</button> 
57. </div> 
58. <div id="images"> 
59.  
60. <p style="margin-top: 40px;"></p> 
61.  
62. <div id="img2" ></div> 
63.  
64. <div id="img3"></div> 
65. </div> 
66.  
67. </div> 
68.  
69. <script>window.FileAPI = { staticPath: './fileapi/' };</script> 
70. <script src="./fileapi/FileAPI.min.js"></script> 
71. <script> 
72.  
73. var el = $('input').get(0); 
74.  
75.  
76. FileAPI.event.on(el, 'change', function (evt){ 
77. var files = FileAPI.getFiles(evt); // Retrieve file list 
78.  
79. FileAPI.filterFiles(files, function (file, info){ 
80. if( !/^image/.test(file.type) ){ 
81. alert('图片格式不正确'); 
82. return false; 
83. } 
84. else if(file.size > 20 * FileAPI.MB){ 
85. alert('图片必须小于20M'); 
86. return false; 
87. } 
88. else{ 
89. return true; 
90. } 
91.  
92. }, function (files, rejected){ 
93.  
94.  
95. if( files.length ){ 
96. var file = files[0]; 
97. var img0 = FileAPI.Image(file); 
98. var img1 = FileAPI.Image(file); 
99. var ratio = 0; 
100. FileAPI.getInfo(file, function (err, info) { //get image ratio 
101. if (!err) { 
102. if (info.width > info.height) { 
103. ratio = info.width / 500; 
104. } 
105. else { 
106. ratio = info.height / 500; 
107. } 
108. } 
109. }); 
110.  
111. img0.resize(500, 500, 'max') //place image and register jcrop 
112. .get(function(err, img) { 
113. $('#img2').empty(); 
114. $('#img2').append($(img)); 
115.  
116. $('#img2').children().Jcrop({ 
117. aspectRatio: 1, 
118. bgColor: 'rgba(0,0,0,0.4)', 
119. onSelect: function(c) { 
120. img1.matrix.sx = c.x * ratio; 
121. img1.matrix.sy = c.y * ratio; 
122. img1.matrix.sw = c.w * ratio; 
123. img1.matrix.sh = c.h * ratio; 
124. img1.matrix.dw = 500; 
125. img1.matrix.dh = 500; 
126.  
127. img1.get(function(err, img) { 
128. // $('#img3').empty(); 
129. // $('#img3').append($(img)); 
130. $('#img3').html($(img)); 
131. }); 
132.  
133. } 
134. }); 
135. }); 
136. $('#btn').on('click',function(){ 
137. FileAPI.upload({ 
138. url: '/testUpFile/upFile', 
139.  
140. files: { images: img1 }, 
141. progress: function (evt){ /* ... */ }, 
142. complete: function (err, xhr){ /* ... */ 
143. //alert(xhr.responseText); 
144.  
145. } 
146. }); 
147.  
148. }); 
149.  
150. } 
151. }); 
152. }); 
153.  
154. </script> 
155. </body> 
156. </html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。