大佬教程收集整理的这篇文章主要介绍了HTML5前端图片压缩，兼容手机，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
主要用了两个html5的 API，一个file，一个canvas，压缩主要使用cnavas做的，file是读取文件，之后把压缩好的照片放入内存，最后内存转入表单下img.src，随着表单提交。
照片是自己用单反拍的，5M多，压缩下面3张分别是600多kb，400多kb，300kb的最后那张失真度很大了，压缩效率蛮高的。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta charset="utf-8" /> <title>File API Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style> #test { display: none; } </style> </head> <body> <input type="file" id="fileImg"> <form> <img src="" id="test" alt=""> </form> <script> function handleFileSELEct(evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for ( var i = 0,f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { conTinue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFilE) { return function(E) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width() / 10 + 'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URl. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change',handleFileSELEct,falsE); var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {ImagE} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {ImagE} result_image_obj The compressed Image Object */ compress: function(source_img_obj,quality,output_format){ var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); //naturalWidth真实图片的宽度 cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj,0); var newImageData = cvs.toDataURL(mime_type,quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; } } </script> </body> </html>
整理至网络：
以上是大佬教程为你收集整理的HTML5前端图片压缩，兼容手机全部内容，希望文章能够帮你解决HTML5前端图片压缩，兼容手机所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。