npm 包 firs 使用教程

阅读时长 4 分钟读完

什么是 firs?

firs (Fast Image Resize and Serve) 是一个快速的、可靠的、高性能的图像缩放和响应式图片服务器。它使用 Node.js 构建,并且是一个开源的 npm 包,你可以随时在你的项目中使用它。

使用 firs,你可以快速处理大量的图像,将它们缩放到合适的大小,并提供高性能响应式图片服务。firs 还提供了多种缩放模式供你选择,包括普通缩放、裁剪、填充等。

安装 firs

在你的项目目录下安装 firs,你需要通过 npm 安装 firs 模块。

使用 firs

初始化 firs

在你的项目中,你需要引用 firs 模块,并进行初始化操作。

在初始化时,你需要向 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:缩放后会按照指定的长宽比来进行裁剪,可能导致某些部分被裁剪。
  • 对于 widthheight 参数,你可以传递一个 auto 的值,这样 firs 将会根据图片的长宽比来计算出缩放后的 width 和 height。

  • url 表示图片的地址,在 firs 中,你需要将图片地址转化为基于 root 参数的相对路径,这样 firs 才能够识别图片的路径。

在处理完成后,我们通过设置响应头 Content-Type 来告诉客户端图片的 MIME 类型,并发送缩放后的图片 buffer 值到客户端。

总结

在本文中,我们详细介绍了 firs 处理图片的相关操作,并提供了完整的代码示例,以帮助你更好地了解和使用 firs。firs 是一个高性能、可靠且易于使用的 npm 包,可以为你的项目提供快速、高效的响应式图片服务。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055ea281e8991b448dbf8a

纠错
反馈