HTML5 Canvas智能图片引擎 - 压缩/缩放/批量处理（纯前端）

前言：一个月前在日志提到的HTML5 Canvas的纯前端的压缩系统，这两天克服懒癌加班加点完善了一下，终于完成了

先展示一下图片吧：

当然这个图片是用这个前端的“缩放”功能调整分辨率的以调整到一个相对来说比较满意的大小

       发帖的时候最头疼的是什么？当然就是这个图片，因为论坛原因对于上传的图片有大小的限制，对于佬们还好，对于萌新来说是头疼的存在，当好不容易辛辛苦苦阅读完版规，按照要求编写，最后发现需要图片，而且调整来调整去不行，很是绝望()
       曾经我也是其中的一员，用ffmpeg一遍遍打命令打到最后实在是受不了了，有人会说不是有简单的工具/软件/网站嘛，我本人是能不上传就不上传，能不安装就不安装，本来只是让人工智能编写个ffmpeg简单命令行而已，然后推荐我用这个HTML5 Canvas纯前端，经过实际体验和功能完善后，在Claude AI的协助下的HTML5 Canvas智能图片引擎诞生啦

功能介绍：

1.快速压缩

2.滑块缩放

3.精确缩放

快速压缩：

定位：适合想要快速发帖子的

1.预设值：400/450/500/550/600KB（覆盖2-8级）：针对大部分坛友预设的预设值，选择对应等级的最大尺寸值，就能压缩到接近最大尺寸值

2.小文件自动跳过：假设这个文件小于预设值，就会跳过，避免反向压缩等尴尬情况
实测：2M，6M，20MB的图片都能精确压缩对应等级

滑块缩放
定位：适合需要帖子美观
还在为大图片而烦恼嘛， 还在为想要精确控制图片大小而苦恼嘛？
1、缩放是指按照当前图片比例进行缩小，在减少分辨率的同时也能控制图片大小

2、采用滑块调节，范围在10%-150%，为5%的幅度，并且采用拖拽形式

精确缩放
定位：像素级调整图片，适合做表情包/头像
1、可自定义宽和高，并且可自定义容差，随心调配
2、自动等比，只输入宽或高，另外一边自动计算，优先保持图像比例

通用功能
1、设置png、jpeg和webp三个照片格式
2、jpeg和webp设置图片质量
3、实时预览功能(最满意的功能)

在单图片的情况下，实时预览照片的分辨率和大小，并且可以实时调整，做到无缝切换

4.“清除”功能，可以取消选中或者待处理的图片

(不知道能不能看清缩放后的大小，可能有坛友会说怎么变大了，其实是jpg转png，限制允许的条件下我更愿意用png)

使用教程

简单一句话：打开文件->浏览器弹出界面->点击/拖拽图片->点击最大分辨率->开始压缩->下载/下载全部

具体流程(单图片)为：
     1.选择图片
     2.左边原图，右边实时预览(显示图片大小和分辨率)

     3.调整参数(选择压缩或者滑块)

     4.满意就下载(*´∀`)~♥

多图片也是类似的，只不过没有实时预览(考虑性能问题)，但最终能看到处理结果，并且在批量下载的时候浏览器会询问“是否允许多文件下载”，点允许就可以了

注意事项

1.大文件的输出格式png可能会压缩失败

原因：png是无损格式，只能靠缩小尺寸(单维度调教)，算法难以精确命中目标(人工智能这样告诉我的())，就是png是非线性的，所以压缩很难到达我规定的尽可能接近最大限度，我的本意是尽可能在当前等级能够上传最清晰的图片，建议快速压缩采用jpeg，滑块不受影响
(这个功能我搞了很久，不然压缩得很小，不然压缩就超过额度没意义了()）
2.不能选定路径，因为浏览器内核规定的，所以只是默认下载地址

最后，不知道坛友用得怎么样，希望可以听到一些反馈的意见(当然我自己用得没问题就懒得改了())，坛友有什么新想法也可以自己改改，不收费，免费给坛友用！如果觉得对你有帮助的话，可以点个免费的追随，是我最大的鼓励(*´∀`)~♥

本人都是使用最简单的图片压缩方式：画图里面直接按比例调整大小

很强大的工具哎，图片缩放功能感觉还是经常要用到的

泥潭真是人才济济卧虎藏龙，能做出这种方便的小工具真素人美心善

小工具确实很方便一键式压缩图片尺寸了

超级实用的小工具！感觉很多地方都能用得到

可以试试诶，我一般都是丢到聊天软件自动压缩然后保存回来，这个可控程度就高多了

非常好用工具！！！！！！发帖前要压缩图片真的太真实了，每次都被限制图片大小气晕JPG

这个发帖还真挺实用的，之前总是提示超限制然后有用win自带图片功能调大小，比较麻烦

wow很实用的工具呀，能方便不少发帖的坛友～
而且这个UI挺有科幻感的

很有用耶,這樣就不用小畫家一張張改了./w\

快速调节大小还挺方便，咱每次都是先设置尺寸，再去压缩画质的(´×ω×`)

这个前端做的不错啊，比每次都要手动调整脚本好玩多了

哦，我的天吶，这个工具可太棒了，能省的我开PS了，PS说实话打开真的慢

经常跟图片打交道的先收藏一下

看着很方便惹，本可一般都是用一些网站来压缩

很棒的工具！如果能有个裁剪的功能就更棒了

楼主早点出手的话，我前阵子就不用一张图一张图地压缩了555

本地也可以用一些工具箱处理, 我一般直接用我的看图软件直接处理了, faststone简单好用~

感觉会是很好用的工具，感谢楼主分享了。