几百张图片快速批处理工具bat-sharp.js介绍
项目开发中的图片问题
某些前端项目里含有大量图片,对这些图片进行系列操作似乎是必须的,
因为你不可能指望设计师给到你的图片就是能最终上到生产的。
你可能需要对图片进行一系列的处理,才能满足最终要求。
这里面最常见的图片处理可能就是图片压缩和图片格式转换。
图片压缩
因为dpr的关系,如果是做移动端项目,切图往往都是按照设备物理像素给定的,
经常是3倍图,这些图片是很大的。所以进行图片压缩是必不可少的一环。
如果只是少量图片压缩,我们可以使用诸如https://tinypng.com/ 这样的
在线图片处理工具,但是他们都有一个问题,即能处理的图片量或收费问题。
如果有上百张图片要处理,使用他们是比较麻烦的。
以tinypng这个网站为例,虽然他说在免费版本里,一次最多可以帮忙转换20张图片,
但是如果你压缩完20张,马上再去压缩另外20张,
有一定的概率它不会帮你压缩完,会提示你:too many files uploaded。
那么这个时候,如果你可能需要稍等几分钟,再次操作,
它才可能帮你多压缩几张。
如此下来,压缩上百张图片,可能需要你几分钟甚至十几分钟时间。
并不是说十几分钟很长,只是说 你明知道,本可以几秒完成的事情,
却要花这么久,长此以往,你会觉得虽然免费但很不划算。
图片格式转换
第二个问题,也是基于3倍图很大的问题。如果我们使用常规的png或jpg图片,
在保证图片质量的情况下,那么再怎么压缩,都是有个下限的。
此时换一个空间占用更小的图片格式就可以解决这个下限问题。
我们可以将图片转换成webp和avif这两种格式,他们的大小非常小。
然后在需要引入图片的代码里,这样写:
<picture><source srcset="@/assets/a.avif" type="image/avif"><source srcset="@/assets/a.webp" type="image/webp"><img src="@/assets/a.jpg" @error="onErr"></picture>
那么,浏览器将基于从上到下的顺序,依次查找图片,如果第一种格式的图片
浏览器可以渲染,就停止向下加载图片。
于是当你项目有上百张图片的时候,你就需要对这上百张图片进行格式转换。
bat-sharp
正是由于项目开发中的这两个图片处理问题,我开发了一个工具bat-sharp。
他可以几秒钟就处理几百张图片的压缩和格式转换。
个人觉得很好用,所以发了个npm包,推荐给大家。
关于bat-sharp你可能有一些问题。
为什么叫bat-sharp?
为什么叫bat-sharp呢?因为它底层使用的是sharp这个图片处理包,
我这里主要是封装了一些批处理的能力,所以叫bat-sharp。
为什么它这么快?
因为sharp包底层是libvips,一个c++写的图片处理库。
使用bat-sharp
install
npm i bat-sharp -D
usage
const { batSharp } = require('bat-sharp');batSharp({inputArr: ['./images/*.png'],format: 'webp', // png jpeg webp avif等outputPath: './images2/',outputConfig: { // 参考 https://sharp.pixelplumbing.com/api-output#pngquality: 60,},
})
请注意outputConfig, 根据你要输出的格式不同,内部字段不同。
不过也有一些相同的字段,比如控制图片质量的quality字段。
最后
bat-sharp的GitHub地址:https://github.com/cunzaizhuyi/bat-sharp
关于bat-sharp的讲解视频:https://www.bilibili.com/video/BV1ea411U7Vu/
关于如果在引用图片的时候使用多种格式:https://www.bilibili.com/video/BV17t4y157Ep/
我是飞叶,欢迎关注。
几百张图片快速批处理工具bat-sharp.js介绍相关推荐
- Windows批处理(cmd/bat)常用命令
Windows批处理(cmd/bat)常用命令 一.总结 一句话总结: 1.批量处理图片的方式? PS批处理是基于强大的图片编辑软件Photoshop的,用来批量处理图片的脚本: 2.大量的重复的操作 ...
- Windows批处理(cmd/bat)常用命令教程
Windows批处理(cmd/bat)常用命令教程 简单详细,建议收藏 常见问题: 1.如果你自己编写的.bat文件,双击打开,出现闪退 2.批处理.bat 文件中输出中文乱码 解决方法在文章末尾! ...
- Windows批处理 cmd/bat 常用命令教程
Windows批处理(cmd/bat)常用命令教程 简单详细,建议收藏 常见问题: 1.如果你自己编写的.bat文件,双击打开,出现闪退 2.批处理.bat 文件中输出中文乱码 解决方法在文章末尾! ...
- [Window] Windows批处理(cmd/bat)常用命令小结
目录 Windows批处理(cmd/bat)常用命令小结 什么是批处理? 批处理命令简介 批处理符号简介 常用DOS命令 Windows Batch 常用命令 Windows批处理(cmd/bat)常 ...
- ueditor如何设置上传图片的高度宽度_上百张图片上传并对齐,你加班2小时没搞定,同事简单三步就完成...
Excel除了汇总数据还可以上传保存相片,比如我们在人力信息表中将每个人的相片放到表格里面去,或者我们需要将宠物对应的相片放到表格里面去,这就涉及到图片的批量上传以及对齐的操作. 如图所示,我们需要将 ...
- 调用指定目录下的批处理bat_批处理(.bat)的奇技淫巧
作为一名死肥宅,隔壁王翠花请你修电脑,你支支吾吾啥都不会,然后隔壁李铁蛋给王翠花秀了一段没吊用的批处理,把翠花迷的神魂颠倒,最后电脑修没修不知道,雨后小故事是没少. 所以嘛,电脑不一定要会修,但是骚骚 ...
- UCML-领先的B/S应用快速开发工具,基于组件重用和应用框架重用,支持.NET体系,直接生成C#源码;
UCML-领先的B/S应用快速开发工具,基于组件重用和应用框架重用,支持.NET体系,直接生成C#源码:UCML涵盖了一个WEB应用系统业务开发的全过程,包括数据访问层(O/R映射)定义.业务框架开发 ...
- [Unity3D经验分享]批处理工具 (提前下班神器)
Unity中批处理的原理与使用 前言 由于从事工业三维可视化的原因,我们的项目中有大量的模型需要在Unity中打包为assetbundle文件,其实打包assetbundle的过程是很机械的过程,这种 ...
- win10任务栏透明_win10批处理工具箱bat下载-win10批处理工具箱bat文件免费版
win10批处理工具箱bat文件免费版是最近上线的一款十分给力的win10辅助程序软件,同时它也是可以为我们的计算机桌面提供丰富美化功能的程序,这次我将共享以前从Internet收集的工具给大家免费使 ...
最新文章
- 在开源模式下云计算大数据的现状浅析
- WEB前端开发的思考与感悟
- Cocoapods的Podfile使用
- Eclipse 的IOConsole Updater error
- RDIFramework.NET V2.9版本多语言的实现
- ORACLE导出导入意外终止导致 ORACLE initialization or shutdown in progress 问题解决
- ipv6单播地址包括哪两种类型_探秘联接|技术小课堂之BRAS设备IPv6地址分配方式...
- Ubuntu16.04安装Shark-3.0.0
- 判断当前环境在微信下,还是企业微信下
- 以前是传xml的吗_关于XML:新手入门.
- 开发类似vs的界面_C#会不会成为移动开发最便捷的语言?
- Repast——Agent对象换成图标和显示属性问题
- 计算机程序设计实验报告总结,c语言实验总结(大一c语言实验报告总结)
- 厦门大学LaTeX毕业论文模板:中英文双目录
- 方舟同步服务器信息,方舟服务器备份和数据库备份
- flash不同颗粒SLC、MLC、TLC、QLC擦写次数
- \t\t我们一直在上演“混乱大都市”的神话传说
- 数据结构—时间、空间复杂度
- 关于UTF8,UTF16,UTF32,UTF16-LE,UTF16-BE
- SSO单点登录-基于cookie的单点登录
热门文章
- 【图片批量处理软件分享】可批量添加水印/批量重命名/批量裁剪/批量缩小尺寸
- 项目管理:甘特图如何让工作更有成效?
- 三七出品--自制国内无人机航拍视角下车辆检测数据集
- JSP获取客户端信息
- DuckDB学习-初识tpcds
- 如何在pc上开发Android程序,电脑上运行Android应用(APK软件)超简单方法
- Slime:让 Istio 服务网格变得更加高效与智能
- 键盘录入3个学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分从高到低存入文本文件
- 1、第一列为姓名,第二列为语文成绩,第三列为数学成绩,编写一个程序,实现(1)按要求创建这样的文件 (2)读取文件中的信息并输出以下结果: ①分别求这个班数学和语文的平均分(保留1位小数)并输出
- 混子科研狗 组会日记(2022.3.16)