前端图片压缩下载工具 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
 6     <title>前端图片压缩</title>
 7   </head>
 8   <body>
 9     <input type="file" id="input" multiple accept="image/*" />
10     <script type="text/javascript" src="https://blog-static.cnblogs.com/files/sunyuweb/compressor.js?t=1676943583"></script>
11     <script type="text/javascript">
12       /**
13         配置参考:
14         https://github.com/fengyuanchen/compressorjs#readme
15       */
16       window.onload = function () {
17         document.getElementById("input").addEventListener("change", (e) => {
18           console.log("图片==>", e.target.files);
19           for (let item of e.target.files) {
20             console.log("压缩前==>", item);
21             new Compressor(item, {
22               // convertTypes:['image/png', 'image/webp'], // 转换后的图片格式是JPEG
23               // convertSize: 5000000, // 转换大小: 5000000 (5 MB), 转换后的图片格式是JPEG
24               quality: 0.5, // 质量: 0 - 1 输出图像的质量。它必须是介于 0 和 1 之间的数字。如果此参数是其他参数, 则默认值 0.92 和 0.80 分别用于 image/jpeg 和 image/webp。其他参数将被忽略。小心使用 1, 因为它可能会使输出图像的大小变大。
25               success(res) {
26                 console.log("压缩后==>", res);
27                 let imageUrl = window.URL.createObjectURL(res);
28                 let imgName = res.name;
29                 var a = document.createElement("a");
30                 a.href = imageUrl;
31                 a.download = imgName;
32                 document.body.appendChild(a);
33                 a.click();
34                 a.remove();
35               },
36               error(err) {
37                 console.log("err==>", err);
38               },
39             });
40           }
41         });
42       };
43     </script>
44   </body>
45 </html>

 

posted @ 2023-02-21 09:42  Sun·傲宇  阅读(24)  评论(0)  编辑  收藏  举报