js图片压缩算法-js压缩图片最低能压缩多百分之多少

原创：找图网 2023-05-03 12:08:07

怎么用JavaScript在线压缩图片

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

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

<!DOCTYPE html>

<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0."></script> <script type="text/javascript" src="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 = (id); // (filebtn); // var files = ; // (); // (files); var files = ; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. = (function(theFile) { return function(e) { // Render thumbnail. // ([0]); // (e.target); (e.); var i = ("test"); i.src = ; ($(i).width()); ($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); ($(i).width()); ($(i).height()); var quality = 50; i.src = (i,quality).src; (i.src); i. = "block"; }; })(f); // Read in the image file as a data URL. (f); } } ('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>