利用HTML5,前端js实现图片压缩

主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交。

照片是自己用单反拍的,5M多,压缩下面3张分别是600多kb,400多kb,300kb的最后那张失真度很大了,压缩效率蛮高的。

 

  1. <!DOCTYPE html>
  1. <html>
  2. <head>
  3. <meta charset="utf-8"/>
  4. <title>File API Test</title>
  5. <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  6. <script type="text/javascript" src="js/JIC.js"></script>
  7. <style>
  8. #test{
  9. display: none;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <input type="file" id="fileImg" >
  15. <form>
  16. <img src="" id="test" alt="">
  17. </form>
  18. <script>
  19. function handleFileSelect (evt) {
  20. // var filebtn = document.getElementById(id);
  21. // console.log(filebtn);
  22. // var files = filebtn.target.files;
  23. // console.log(filebtn.target);
  24. // console.log(files);
  25. var files = evt.target.files;
  26. for (var i = 0, f; f = files[i]; i++) {
  27.  
  28. // Only process image files.
  29. if (!f.type.match(‘image.*‘)) {
  30. continue;
  31. }
  32.  
  33. var reader = new FileReader();
  34.  
  35. // Closure to capture the file information.
  36. reader.onload = (function(theFile) {
  37. return function(e) {
  38. // Render thumbnail.
  39. // console.log(evt.target.files[0]);
  40. // console.log(e.target);
  41. console.log(e.target.result);
  42. var i = document.getElementById("test");
  43. i.src = event.target.result;
  44. console.log($(i).width());
  45. console.log($(i).height());
  46. $(i).css(‘width‘,$(i).width()/10+‘px‘);
  47. //$(i).css(‘height‘,$(i).height()/10+‘px‘);
  48. console.log($(i).width());
  49. console.log($(i).height());
  50. var quality = 50;
  51. i.src = jic.compress(i,quality).src;
  52. console.log(i.src);
  53. i.style.display = "block";
  54. };
  55. })(f);
  56.  
  57. // Read in the image file as a data URL.
  58. reader.readAsDataURL(f);
  59. }
  60. }
  61.  
  62. document.getElementById(‘fileImg‘).addEventListener(‘change‘, handleFileSelect, false);
  63. </script>
  64. </body>
  65. </html>

 

  1. var jic = {
  2. /**
  3. * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed
  4. * @param {Image} source_img_obj The source Image Object
  5. * @param {Integer} quality The output quality of Image Object
  6. * @return {Image} result_image_obj The compressed Image Object
  7. */
  8.  
  9. compress: function(source_img_obj, quality, output_format){
  10. var mime_type = "image/jpeg";
  11. if(output_format!=undefined && output_format=="png"){
  12. mime_type = "image/png";
  13. }
  14.  
  15. var cvs = document.createElement(‘canvas‘);
  16. //naturalWidth真实图片的宽度
  17. cvs.width = source_img_obj.naturalWidth;
  18. cvs.height = source_img_obj.naturalHeight;
  19. var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
  20. var newImageData = cvs.toDataURL(mime_type, quality/100);
  21. var result_image_obj = new Image();
  22. result_image_obj.src = newImageData;
  23. return result_image_obj;
  24. },
  25. function ****(***){}
  26. }

 

 

 

 

利用HTML5,前端js实现图片压缩

利用HTML5,前端js实现图片压缩

利用HTML5,前端js实现图片压缩

利用HTML5,前端js实现图片压缩,布布扣,bubuko.com

利用HTML5,前端js实现图片压缩

上一篇:通过CSS显示垂直文本


下一篇:在Vim中直接调用make进行编译