自制JPG/PNG在线压缩工具，纯前端实现

一、前......言......对齐

由于自己有强烈的对截图（均是无损，体积很大）处理的强烈诉求，加上市面上并没有满意的工具，因此，一狠心，自己做了个在线压缩工具，相比于tinypng，我这个工具还自带尺寸设置功能，同时还可以控制压缩率，指定压缩格式，纯前端实现，高性能高效率。

二、闪亮登场噔噔噔噔

OK，铺垫了这么久，是时候拉出来瞅瞅了。

您可以狠狠地点击这里：JPG/PNG简易在线尺寸缩放与压缩工具

完整访问地址是：www.zhangxinxu.com/sp/tinyimg/

下图所示的是在桌面端下的布局效果。

中间是操作区，左侧是原图，右侧是压缩后效果预览图。

工具亮点

• 支持任意图片上传方式，包括直接剪切板粘贴，拖拽上传，以及传统的点击按钮选择文件上传。
• 支持选择压缩与导出的图片格式（色彩丰富图像选择JPG）。
• 支持尺寸缩放。
• 支持批量压缩。
• 支持移动端。
• 纯前端实现，速度快，体验好。

三、实现原理说明

JPG前端压缩

JPG的压缩使用的是canvas的toDataURL方法。

canvas.toDataURL(mimeType, quality);

其中quality就是图像的质量。

但是此方法只适合image/jpeg或者image/webp，所以，PNG的图像压缩无法使用此API。

PNG前端压缩

PNG的前端压缩这里使用的是 UPNG.js，项目地址：github.com/photopea/UP...

还是挺好用的，我用的是下面这个API进行压缩的。

UPNG.encode(imgs, w, h, cnum, [dels])

其中的cnum就是用来设置PNG压缩损失的，0的话是无损。

其他

其他没什么好说的，上传图片解析，资源下载等，之前都有专门撰文介绍过，我也懒得展开。

总之，技术实现上并不难，就是需要有较多的积累。

四、欢迎使用与反馈

以上就是本工具的基本介绍，欢迎大家使用，终身免费，可以加入收藏，免得日后忘记。

虽然经过多次测试，但个人疏忽在所难免，所以，如果在使用中有什么问题，欢迎反馈。

以及，对于本工具，你还有什么好的想法或者觉得不错的需求，也可以提出来，我会及时跟进进行更新的。

好了，就这些，感谢大家一如既往的支持，比心！

❤️ 🧡 💛 💚 💙 💜