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

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

相关推荐
程序员凡尘22 分钟前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
编程零零七4 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
(⊙o⊙)~哦6 小时前
JavaScript substring() 方法
前端
无心使然云中漫步6 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者6 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_7 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js
麒麟而非淇淋8 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120538 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
阿树梢8 小时前
【Vue】VueRouter路由
前端·javascript·vue.js
随笔写9 小时前
vue使用关于speak-tss插件的详细介绍
前端·javascript·vue.js