什么是 firs?
firs (Fast Image Resize and Serve) 是一个快速的、可靠的、高性能的图像缩放和响应式图片服务器。它使用 Node.js 构建,并且是一个开源的 npm 包,你可以随时在你的项目中使用它。
使用 firs,你可以快速处理大量的图像,将它们缩放到合适的大小,并提供高性能响应式图片服务。firs 还提供了多种缩放模式供你选择,包括普通缩放、裁剪、填充等。
安装 firs
在你的项目目录下安装 firs,你需要通过 npm 安装 firs 模块。
npm install firs --save
使用 firs
初始化 firs
在你的项目中,你需要引用 firs 模块,并进行初始化操作。
var firs = require('firs')({ root: __dirname+'/public/', cache: '', headers: '', formats: '', timeout: '', debug: false, });
在初始化时,你需要向 firs 提供一些参数:
root
表示你将会提供的基础图片路径,你需要在你的容器上面部署图片或使用 CDN 来提供它们;cache
表示 firs 将会缓存的图片路径,在这里你可以使用任何可用的路径,但需要注意的是,你的程序需要对该路径进行写操作;headers
表示 firs 将会设置的响应头;formats
表示 firs 支持的处理图片的格式;timeout
表示请求超时时间;debug
表示开启或关闭 firs 的调试模式。
处理图片
通过 firs,你可以对图片进行多种缩放、裁剪和填充等操作。下面提供一个示例代码,你可以进行修改和调整以适应你的项目。
-- -------------------- ---- ------- ------------------------------------------- ------------- ----- --- --- - ----------------- --- ---- - ----------------- -- ------- --- ----- - ------------------- --- ------ - -------------------- --- ---- - ----------------- ----- -------------------- --- --- ------- - - ---- ---- ------ ---------------- ------- ----------------- ----- ---- -- --------------------- ------------- -------- -- ----- - ----------------------------- -------------- ------------- ---- -------- ------- - --- -------- - ------------------------- ----------------------------- ---------- ------------- -------- --- ---
在上述代码中,我们在 app 的 /image/:width/:height/:mode/:url
上注册了一个路由处理器。它接收了四个参数:
width
表示缩放后的宽度;height
表示缩放后的高度;mode
表示缩放模式;url
表示图片的地址。
下面分别对这些参数进行讲解:
mode
参数可以选用的值有:fill
:缩放后会刚好填充画布,没有任何部分裁剪。fit
:缩放后会尽可能地完整地存储画布,可能会留有空白。crop
:缩放后会按照指定的长宽比来进行裁剪,可能导致某些部分被裁剪。
对于
width
和height
参数,你可以传递一个auto
的值,这样 firs 将会根据图片的长宽比来计算出缩放后的 width 和 height。url
表示图片的地址,在 firs 中,你需要将图片地址转化为基于root
参数的相对路径,这样 firs 才能够识别图片的路径。
在处理完成后,我们通过设置响应头 Content-Type
来告诉客户端图片的 MIME 类型,并发送缩放后的图片 buffer 值到客户端。
总结
在本文中,我们详细介绍了 firs 处理图片的相关操作,并提供了完整的代码示例,以帮助你更好地了解和使用 firs。firs 是一个高性能、可靠且易于使用的 npm 包,可以为你的项目提供快速、高效的响应式图片服务。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055ea281e8991b448dbf8a