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

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

相关推荐
慧一居士6 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead8 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app