背景
工作或者自己平时记录一些文档的时候,经常会用到一些图片,为了使得图片更小,可能会借助一些图片工具对图片进行一些压缩或者格式转化处理。
之前一直使用的是 tinypng.com 平台来处理的,不过该平台之前只能对一些特定的图片进行压缩,不能转化图片,对 svg
直接生成图片也没有支持。不过最近的 beta
版本支持生成多种类型的图片格式了,可能随时就是正式版本了。
对于 svg 转成图片以及缩放尺寸
的场景,之前大都是自己写脚本,使用 Sharp 包能就能处理,详细的 api 官方介绍的很详细。可以查看其官网。也有很多文章介绍了这些api的使用。
搭建图片处理工具
在不同的办公电脑上,自己写脚本可能比较繁琐,出于自身如下几个需求,:
- 更改图片尺寸
- 自行调整压缩系数
- 对 GIF 图适当进行下压缩
- 将 svg 转成 PNG 等图片格式
- 其他几种类型图片格式转化
当然现在熊猫压缩beta版本支持格式转化了,不过鉴于其他一些条件,就开发了一个简便的图片压缩工具页面,记录下这个过程中的一些注意事项。主要是 npm install sharp
的安装。其他的都是具体 api 的使用都较为简单,可能参数调整较麻烦。
在sharp最新的版本中,根据官方文档可知,针对不同的平台,sharp安装过程的处理方式不同,在我们电脑的开发环境中, 根据官网的提示,设置libvips和sharp的镜像然后直接 npm install sharp
就好了,如下图所示:
但是在服务器上,部分 linux 系统需要 预构建
sharp 和 libvips 工具包,就是需要运行 install
钩子进行预构建下, 不然安装不成功,比如我的这个 linux x86_64
,查看sharp包的运行脚本便可知。一般如果不做一些处理,这个包很难安装成功。
找了一大圈资料,也没找到现成的服务器部署的案例,最后还是参照官网的处理方式,采用自定义从本地资源构建
的方式处理。官网描述如下,如果想要 sharp 和 libvips 都从本地资源预构建构建,使用如下配置便可。
sharp部署
比如在服务器根目录创建 /sharp-pkg
, 然后将libvips和sharp预构建从本地取的变量赋值便可,如下所示:
ini
sharp_libvips_local_prebuilds="/sharp-pkg"
sharp_local_prebuilds="/sharp-pkg"
然后往该目录上传预创建的资源,比如使用目前最新包 sharp0.32.6
, 那么对应该资源目录就是如下所示:
可以去sharp的github
官方地址中release
查看每期发布,都会有对应的资源,找到了使用脚本推送到服务器便可, 如下简要命令,当然也可以使用别的方式。
scss
scp -r sharp-pkg user@xx.xxx.xxx.xxx:/
通过上述方式,基本可以安装成功,运行 npm install sharp
就可以正常下载了。当然不是所有服务器都需要如此,详情可查看其官方的 install 下载介绍模块。希望这个文档能帮助需要linux服务器部署sharp
的人。
成品展示
页面较为简陋,就是一些参数设置,然后上传想要处理的图片。目前自己一般使用这个,如果有需要并且能帮助到你,也可以直接使用。链接地址www.nqone.com/image大概效果如下所示:
最后吐槽下,现在前端工作是真的难找啊难找,行情太差了 ......