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大概效果如下所示:

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

相关推荐
m0_748236112 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo61714 分钟前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_7482489416 分钟前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_7482356127 分钟前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink5 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-7 小时前
验证码机制
前端·后端
燃先生._.8 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js