by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10983 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、自制工具的背景

由于笔耕不缀，所以经常需要对截图进行处理。

无论是哪个截图工具，其保存在剪切板中的（或准备下载的）都一定是无损的PNG图像。

无损PNG图像的尺寸比较大，尤其是那些色彩丰富的图像，更是比同尺寸的JPG图像大了好几倍。

这就会导致在Web网页中传输的时候，加载缓慢，内存占用高，流量开销大等诸多问题。

比方说我的博客文章，就有强烈的对截图进行尺寸优化的需求。

在Windows操作系统下，我都是使用Faststone Capture这个软件，非常好用。

但是在MacOS下，却一直没有什么满意的软件。

我都是使用tinypng这个网站进行尺寸优化。

但是tinypng也有不足，就是没法改变压缩图片的尺寸，比方说原图是2560*1920，我希望图片缩小到512*384，同时进行压缩，tinypng就无能为力。

然后就使用在线PS，稿定的在线PS图片导出还需要登录，国外的在线PS网站“佛特屁”导出免登录，可如果不熟系Photoshop软件，操作起来也是有些不易的。

总而言之，压图需求强烈，又没有合适的工具，所以我就决定自己做一个纯前端实现的JPG/PNG压缩工具，不仅可以压缩，还可以设置图片的尺寸。

二、闪亮登场噔噔噔噔

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

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

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

我的工具页面都放在 sp 路径下，sp 是 special 的前两个字母，然后工具名称就叫 tinyimg，应该还算好记忆的吧。

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

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

工具亮点

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

三、实现原理说明

JPG前端压缩

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

canvas.toDataURL(mimeType, quality);

其中quality就是图像的质量。

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

PNG前端压缩

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

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

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

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

其他

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

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

zxx: 感谢LuLu UI提供样式与组件支持。

四、欢迎使用与反馈

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

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

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

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

❤️ 🧡 💛 💚 💙 💜

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=10983

（本篇完）