Using HTML5, the front-end JS realize image compression

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The main use of the two HTML5 API, a file, a canvas, compression is done using cnavas, file is read from the file, after the compression good pictures into the memory, the memory into the form of img.src, with the submission of the form.

The photo is his film SLR, 5M, compression below 3 are 600 KB, 400 KB, 300KB eventually the distortion is very big, very high compression efficiency.

  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. // Only process image files.
  28. if (!f.type.match('image.*')) {
  29. continue;
  30. }
  31. var reader = new FileReader();
  32. // Closure to capture the file information.
  33. reader.onload = (function(theFile) {
  34. return function(e) {
  35. // Render thumbnail.
  36. // console.log(evt.target.files[0]);
  37. // console.log(e.target);
  38. console.log(e.target.result);
  39. var i = document.getElementById("test");
  40. i.src = event.target.result;
  41. console.log($(i).width());
  42. console.log($(i).height());
  43. $(i).css('width',$(i).width()/10+'px');
  44. //$(i).css('height',$(i).height()/10+'px');
  45. console.log($(i).width());
  46. console.log($(i).height());
  47. var quality = 50;
  48. i.src = jic.compress(i,quality).src;
  49. console.log(i.src);
  50. i.style.display = "block";
  51. };
  52. })(f);
  53. // Read in the image file as a data URL.
  54. reader.readAsDataURL(f);
  55. }
  56. }
  57. document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);
  58. </script>
  59. </body>
  60. </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. compress: function(source_img_obj, quality, output_format){
  9. var mime_type = "image/jpeg";
  10. if(output_format!=undefined && output_format=="png"){
  11. mime_type = "image/png";
  12. }
  13. var cvs = document.createElement('canvas');
  14. //NaturalWidth the real picture width
  15. cvs.width = source_img_obj.naturalWidth;
  16. cvs.height = source_img_obj.naturalHeight;
  17. var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
  18. var newImageData = cvs.toDataURL(mime_type, quality/100);
  19. var result_image_obj = new Image();
  20. result_image_obj.src = newImageData;
  21. return result_image_obj;
  22. },
  23. function ****(***){}
  24. }


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Tyrone at May 11, 2014 - 10:17 AM