Sharp图片压缩, 格式转化, 尺寸修改以及sharp在linux x86_64服务器上的部署

背景

工作或者自己平时记录一些文档的时候,经常会用到一些图片,为了使得图片更小,可能会借助一些图片工具对图片进行一些压缩或者格式转化处理。

之前一直使用的是 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大概效果如下所示:

最后吐槽下,现在前端工作是真的难找啊难找,行情太差了 ......

相关推荐
小行星1252 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00111 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果27 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9629 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋32 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder33 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh2 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋3 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿3 小时前
【前端】CSS
前端·css