首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:18:40
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了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> 

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

上一篇：浅谈javascript中for in 和 for each in的区别

下一篇：jQuery图片特效插件Revealing实现拉伸放大

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有