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

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

相关推荐
剑亦未配妥4 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光10 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52010 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js