这篇文章发布于 2023年09月5日,星期二,21:05,归类于 Web综合。 阅读 18182 次, 今日 1 次 24 条评论
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
(本篇完)
- 借助CSS mask遮罩显著优化PNG图片的尺寸 (0.408)
- AVIF图片格式简介 (0.358)
- 纯前端JS zip打包文件并下载 (0.345)
- 不使用file类型input也能触发文件上传 (0.345)
- 如何用简单的Web方法实现图片的马赛克效果 (0.273)
- 渐进式jpeg(progressive jpeg)图片及其相关 (0.249)
- SVG <foreignObject>简介与截图等应用 (0.212)
- CSS滤镜和混合模式处理的图片如何上传下载? (0.212)
- HTML5 file API加canvas实现图片前端JS压缩并上传 (0.159)
- 小tips:使用canvas在前端实现图片水印合成 (0.133)
- 详细介绍HTML favicon尺寸 格式 制作等相关知识 (RANDOM - 0.050)
老师 源码可以共享吗 我通过npm 使用,一旦指定宽高压缩就会失效,有时图片会拉伸重叠,有时直接白屏。
const compressed = UPNG.encode(
[newBuffer],
width || decoded.width,
height || decoded.height,
256 * quality,
);
做个客户端吧,类似腾讯的智图,还是客户端最方便
原图的尺寸 kb 转换好像不能 除以 1024 , 与实际尺寸大小不一样
请问一下为什么png不能用cavans处理
因为原生的Canvas方法没有优化PNG的参数,需要使用其他工具进行优化,例如这个:https://www.zhangxinxu.com/sp/tinyimg/
请教下,我怎么才可以使用这个。
有些比较小的jpg格式的图,压缩完反而变大呢
考虑一下 UPNG.js 吗?类似 tinypng 那种量化工具。
PNG压缩就是用的UPNG.js
请问图片上传、下载那块需要后端代码嘛
不需要
129kb的webp图片压缩完成1.1M了[破涕为笑][破涕为笑]
webp没支持,按照PNG处理了,我想下吧,可以兼容下
已兼容webp格式
灰常好用,已收藏~
请问下张老师这个工具的cnum与质量百分比是如何对应的?
0是无损,1-99越高质量越好
哈哈,我以前也做过一个,跟这个挺像的,不过没有这个功能完善。
https://www.ccgxk.com/front-end/254.html
我 88kb 的 jpeg 压缩到 163kb
浏览器默认的 canvas 压缩质量较差—— 上楼提到的 squoosh.app 里可以比较 browser 原生的API 与 wasm (MozJPEG & OxiPNG)的转换效果。
推荐xnview,WIN & MAC多平台
截图snipaste也挺好用,也是WIN & MAC多平台
png 图片处理后导出 jpg,下载结果还是 png。
好的,感谢反馈,后缀名应该是忘记替换了
一直使用Chrome团队写的这个这项目,没见过更好的压缩工具了
https://github.com/GoogleChromeLabs/squoosh