前端实现的canvas支持多图压缩并打包下载的工具

悠悠 2021-12-01 19:02 365阅读 0赞

### \# 技术栈 ###

###### canvas ######

###### jszip.js(网页端压缩解压缩插件JSZIP库) ######

###### FileSaver.js(文件保存到本地库) ######

> 在线预览：[http://htmlpreview.github.io/?https://github.com/xiaoqiuxiong/imageCompressionTool/master/index.html][http_htmlpreview.github.io_https_github.com_xiaoqiuxiong_imageCompressionTool_master_index.html]  
> github: [https://github.com/xiaoqiuxiong/imageCompressionTool][https_github.com_xiaoqiuxiong_imageCompressionTool]

### 解读 ###

*  以上的工具，暂时只是配置了允许png和jpg格式的图片压缩，如需别的格式的请自行到我的github上面clone下载自行修改；
 *  压缩质量：10份；
 *  压缩会自动打包成zip,自行下载解压，压缩速度惊人。
 *  压缩速度我觉得比熊猫压缩牛逼。

### 工具预览 ###

![1540118-20190703103505898-1929379405.png][]

### 直接解读源码：(html) ###

<div class="cont"> <div class="uploadBtn">选择图片<input name="file" accept="image/png, image/jpeg" multiple type="file" id="file"></div> <br> <br> <div class="selectbox"> <div>请选择压缩质量</div> <select id="encoderOptions"> <option value="0.1">10%</option> <option value="0.2">20%</option> <option value="0.3">30%</option> <option value="0.4">40%</option> <option value="0.5" selected>50%</option> <option value="0.6">60%</option> <option value="0.7">70%</option> <option value="0.8">80%</option> <option value="0.9">90%</option> <option value="1">100%</option> </select> </div> <br> <div id="show"> <br> <br> 需要压缩的图片: <br> <br> <ul id="selectView"></ul> <br> </div> <div id="compressBox"> <button id="active" onclick="startCompress()">压缩图片并下载</button> </div> </div> <canvas id="canvas"></canvas>

### 直接解读源码：(js) ###

<script src="jszip.min.js"></script>  <script src="FileSaver.js"></script>  <script> // 图片质量(0-1) var encoderOptions = 0.5; // 获取input var filesInput = document.querySelector('#file') // 获取压缩按钮 var compressBox = document.querySelector('#compressBox') // 选择图片展示视口 var selectView = document.querySelector('#selectView') // 获取选择图片后展示的视口 var show = document.querySelector('#show') var encoderOptionInput = document.querySelector('#encoderOptions') // 所有的选择文件 var files; var canvas; var ctx; // new JSZip对象 var zip = new JSZip(); // 创建images文件夹，用来存在压缩完成的图片 var imgFolder = zip.folder("images"); // 监听input选择文件的变化 filesInput.onchange = function() { // 获取所有file files = filesInput.files // 如果选择files数量大于0就显示压缩操作 if (files.length > 0) { show.style.display = 'block' compressBox.style.display = 'block' } // 拼接缩略图列表 var html = '' for (var i = 0; i < files.length; i++) { html += '<li>[外链图片转存失败(img-Yusvt3iA-1562061874770)(https://mp.csdn.net/mdeditor/'%20+%20getObjectURL(files[i])]%20+%20')</li>' } // 插入拼接的图片列表 selectView.innerHTML = html } // 压缩图片的方法 function startCompress() { demo(files[0], 0) } // 利用递归循环files function demo(file, num) { if (num <= files.length - 1) { encoderOptions = parseFloat(encoderOptionInput.value) // 获取file的base64地址 var imgsrc = getObjectURL(file) // 获取文件名称 var name = file.name // 监听如果转换base64地址成功，就执行下面的 if (imgsrc) { // 创建image,并动态复制src var img = new Image() img.src = imgsrc // 监听img图片加载完成 img.onload = () => { // 获取canvas标签 canvas = document.querySelector('#canvas') // 获取上下文 ctx = canvas.getContext('2d') // 根据图片宽高设置canvas的宽高 canvas.width = img.width canvas.height = img.height // 在canvas上面画图片 ctx.drawImage(img, 0, 0, img.width, img.height); // 把canvas转成路径 // canvas.toDataURL(type, encoderOptions); // 参数 // type 可选 // 图片格式， 默认为image / png // encoderOptions 可选 // 图片质量。 取值范围为0到1。 如果指定图片格式为image / jpeg或image / webp。 如果超出取值范围， 将会使用默认值0 .92。 其他参数会被忽略。 var typeTxt = 'image/jpeg' if (name.indexOf('png') != -1) { typeTxt = 'image/png' } var imgdata = canvas.toDataURL(typeTxt, encoderOptions) // 分割base64 imgdata = imgdata.split(',') // 添加图片到文件夹 imgFolder.file(name, imgdata[1], { base64: true }); // 如果当前的标记和文件的数量相等的话，就说明压缩添加到文件到文件夹已经完成了，可以压缩下载了。 if (num == files.length - 1) { zip.generateAsync({ type: "blob" }) .then(function(content) { // 创建的zip的文件名称是images saveAs(content, "images.zip"); location.reload() }); } else { // 如果没有到标记，就继续回调 num++ demo(files[num], num) } } } } } // 获取file 的base64路径 function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } </script>

### 直接解读源码：(css) ###

### 使用方法： ###

github: [https://github.com/xiaoqiuxiong/imageCompressionTool][https_github.com_xiaoqiuxiong_imageCompressionTool]  
直接Git克隆下来,然后浏览器（最好使用谷歌浏览器）打开idnex.html页面，即刻轻松使用了。  
以后都可以使用了，再也不用用什么熊猫压缩了。  
一键压缩，就是吊！  
好用的话，记得加星。

转载于:https://www.cnblogs.com/it-xiong/p/11124937.html

[http_htmlpreview.github.io_https_github.com_xiaoqiuxiong_imageCompressionTool_master_index.html]: http://htmlpreview.github.io/?https://github.com/xiaoqiuxiong/imageCompressionTool/master/index.html
[https_github.com_xiaoqiuxiong_imageCompressionTool]: https://github.com/xiaoqiuxiong/imageCompressionTool
[1540118-20190703103505898-1929379405.png]: /images/20211201/8ba26eecd088444bbb18e9d9f5957b56.png