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

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

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

二、闪亮登场噔噔噔噔

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

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

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

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

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

工具亮点

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

三、实现原理说明

JPG前端压缩

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

css 复制代码
canvas.toDataURL(mimeType, quality);

其中quality就是图像的质量。

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

PNG前端压缩

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

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

css 复制代码
UPNG.encode(imgs, w, h, cnum, [dels])

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

其他

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

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

四、欢迎使用与反馈

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

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

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

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

❤️ 🧡 💛 💚 💙 💜

相关推荐
贵沫末13 分钟前
React——基础
前端·react.js·前端框架
aklry25 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9332 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子33 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982433 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug35 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo35 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler2811 小时前
解决setTimeout/setInterval计时不准确问题的方案
前端