做了个纯前端JPG/PNG尺寸缩放+压缩的在线工具

这篇文章发布于 2023年09月5日,星期二,21:05,归类于 Web综合。 阅读 18182 次, 今日 1 次 24 条评论

 

封面图

一、自制工具的背景

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

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

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

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

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

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

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

tinypng logo 我都是使用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提供样式与组件支持。

四、欢迎使用与反馈

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

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

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

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

❤️ ? ? ? ? ?

(本篇完)

分享到:


发表评论(目前24 条评论)

  1. jin说道:

    老师 源码可以共享吗 我通过npm 使用,一旦指定宽高压缩就会失效,有时图片会拉伸重叠,有时直接白屏。
    const compressed = UPNG.encode(
    [newBuffer],
    width || decoded.width,
    height || decoded.height,
    256 * quality,
    );

  2. tao说道:

    做个客户端吧,类似腾讯的智图,还是客户端最方便

  3. 搬砖工说道:

    原图的尺寸 kb 转换好像不能 除以 1024 , 与实际尺寸大小不一样

  4. kurko说道:

    请问一下为什么png不能用cavans处理

    • 张 鑫旭说道:

      因为原生的Canvas方法没有优化PNG的参数,需要使用其他工具进行优化,例如这个:https://www.zhangxinxu.com/sp/tinyimg/

  5. dage说道:

    请教下,我怎么才可以使用这个。

  6. ppttfish说道:

    有些比较小的jpg格式的图,压缩完反而变大呢

  7. mmm说道:

    考虑一下 UPNG.js 吗?类似 tinypng 那种量化工具。

  8. xukanghua说道:

    请问图片上传、下载那块需要后端代码嘛

  9. 阿斯顿说道:

    129kb的webp图片压缩完成1.1M了[破涕为笑][破涕为笑]

  10. echeverra说道:

    灰常好用,已收藏~

  11. cloydlau说道:

    请问下张老师这个工具的cnum与质量百分比是如何对应的?

  12. 独元殇说道:

    哈哈,我以前也做过一个,跟这个挺像的,不过没有这个功能完善。
    https://www.ccgxk.com/front-end/254.html

  13. Jun说道:

    我 88kb 的 jpeg 压缩到 163kb

  14. yb6b说道:

    浏览器默认的 canvas 压缩质量较差—— 上楼提到的 squoosh.app 里可以比较 browser 原生的API 与 wasm (MozJPEG & OxiPNG)的转换效果。

  15. vevan说道:

    推荐xnview,WIN & MAC多平台
    截图snipaste也挺好用,也是WIN & MAC多平台

  16. Airyland说道:

    png 图片处理后导出 jpg,下载结果还是 png。

  17. GoldSubmarine说道:

    一直使用Chrome团队写的这个这项目,没见过更好的压缩工具了
    https://github.com/GoogleChromeLabs/squoosh