HTML5 Canvas智能图片引擎 - 压缩/缩放/批量处理（纯前端）
本帖最后由 hezhushizaishi 于 2025-10-4 23:50 编辑前言：一个月前在日志提到的HTML5 Canvas的纯前端的压缩系统，这两天克服懒癌加班加点完善了一下，终于完成了https://img.gamemale.com/album/202509/07/160336xcryx944ytbnbeo3.png先展示一下图片吧：
当然这个图片是用这个前端的“缩放”功能调整分辨率的https://img.gamemale.com/album/202509/07/160336xcryx944ytbnbeo3.png以调整到一个相对来说比较满意的大小 发帖的时候最头疼的是什么？当然就是这个图片，因为论坛原因对于上传的图片有大小的限制，对于佬们还好，对于萌新来说是头疼的存在，当好不容易辛辛苦苦阅读完版规，按照要求编写，最后发现需要图片，而且调整来调整去不行，很是绝望()
曾经我也是其中的一员，用ffmpeg一遍遍打命令打到最后实在是受不了了，有人会说不是有简单的工具/软件/网站嘛，我本人是能不上传就不上传，能不安装就不安装，本来只是让人工智能编写个ffmpeg简单命令行而已，然后推荐我用这个HTML5 Canvas纯前端，经过实际体验和功能完善后，在Claude AI的协助下的HTML5 Canvas智能图片引擎诞生啦https://img.gamemale.com/album/202509/07/160336xcryx944ytbnbeo3.png
static/image/hrline/4.gif功能介绍：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)static/image/hrline/4.gif使用教程简单一句话：打开文件->浏览器弹出界面->点击/拖拽图片->点击最大分辨率->开始压缩->下载/下载全部具体流程(单图片)为：
1.选择图片
2.左边原图，右边实时预览(显示图片大小和分辨率) 3.调整参数(选择压缩或者滑块) 4.满意就下载(*´∀`)~♥多图片也是类似的，只不过没有实时预览(考虑性能问题)，但最终能看到处理结果，并且在批量下载的时候浏览器会询问“是否允许多文件下载”，点允许就可以了static/image/hrline/4.gif注意事项1.大文件的输出格式png可能会压缩失败原因：png是无损格式，只能靠缩小尺寸(单维度调教)，算法难以精确命中目标(人工智能这样告诉我的())，就是png是非线性的，所以压缩很难到达我规定的尽可能接近最大限度，我的本意是尽可能在当前等级能够上传最清晰的图片，建议快速压缩采用jpeg，滑块不受影响
(这个功能我搞了很久，不然压缩得很小，不然压缩就超过额度没意义了()）
2.不能选定路径，因为浏览器内核规定的，所以只是默认下载地址
最后，不知道坛友用得怎么样，希望可以听到一些反馈的意见(当然我自己用得没问题就懒得改了())，坛友有什么新想法也可以自己改改，不收费，免费给坛友用！如果觉得对你有帮助的话，可以点个免费的追随，是我最大的鼓励(*´∀`)~♥
本人都是使用最简单的图片压缩方式：画图里面直接按比例调整大小 很强大的工具哎，图片缩放功能感觉还是经常要用到的:loveliness: 泥潭真是人才济济卧虎藏龙，能做出这种方便的小工具真素人美心善 小工具确实很方便一键式压缩图片尺寸了 超级实用的小工具！感觉很多地方都能用得到;P 可以试试诶，我一般都是丢到聊天软件自动压缩然后保存回来，这个可控程度就高多了 非常好用工具！！！！！！发帖前要压缩图片真的太真实了，每次都被限制图片大小气晕JPG 这个发帖还真挺实用的，之前总是提示超限制然后有用win自带图片功能调大小，比较麻烦 wow很实用的工具呀，能方便不少发帖的坛友～
而且这个UI挺有科幻感的 很有用耶,這樣就不用小畫家一張張改了./w\ 快速调节大小还挺方便，咱每次都是先设置尺寸，再去压缩画质的(´×ω×`) 这个前端做的不错啊，比每次都要手动调整脚本好玩多了 哦，我的天吶，这个工具可太棒了，能省的我开PS了，PS说实话打开真的慢 经常跟图片打交道的先收藏一下:D 看着很方便惹，本可一般都是用一些网站来压缩{:6_186:} 很棒的工具！如果能有个裁剪的功能就更棒了:( 楼主早点出手的话，我前阵子就不用一张图一张图地压缩了555 本地也可以用一些工具箱处理, 我一般直接用我的看图软件直接处理了, faststone简单好用~ 感觉会是很好用的工具，感谢楼主分享了。