npm 包 zeen 使用教程

阅读时长 3 分钟读完

介绍

在前端开发中,我们经常需要对图片进行各种操作,比如压缩、裁剪、缩放等等。npm 包 zeen 就是一个非常好用的图片处理工具,能够帮助我们快速地完成这些工作。

安装

要使用 zeen,我们需要先安装它。使用 npm 命令进行安装:

使用方法

安装完成后,我们就可以使用 zeen 了。它支持的操作非常丰富,下面简单介绍几个常用的操作。

压缩图片

要对图片进行压缩,可以使用 zeen 的compress()方法。该方法的参数有三个:

  • sourcePath:要压缩的图片的路径;
  • targetPath:压缩后的图片的保存路径;
  • quality:压缩后的图片的质量,取值范围为 0-100。

下面是一个示例代码:

-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ----------------------------
----- ---------- - ----------------------------
----- ------- - ---
------------------------- ----------- ---------------- -- -
  ---------------------
-------------- -- -
  -----------------
---

裁剪图片

要对图片进行裁剪,可以使用 zeen 的 crop() 方法。该方法的参数有五个:

  • sourcePath:要裁剪的图片的路径;
  • targetPath:裁剪后的图片的保存路径;
  • x:裁剪的起始 x 坐标;
  • y:裁剪的起始 y 坐标;
  • width:裁剪的宽度;
  • height:裁剪的高度。

下面是一个示例代码:

-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ----------------------------
----- ---------- - ----------------------------
----- - - ---
----- - - ---
----- ----- - ----
----- ------ - ----
--------------------- ----------- -- -- ------ --------------- -- -
  ---------------------
-------------- -- -
  -----------------
---

缩放图片

要对图片进行缩放,可以使用 zeen 的 resize() 方法。该方法的参数有四个:

  • sourcePath:要缩放的图片的路径;
  • targetPath:缩放后的图片的保存路径;
  • width:缩放后的图片的宽度;
  • height:缩放后的图片的高度。

下面是一个示例代码:

-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ----------------------------
----- ---------- - ----------------------------
----- ----- - ----
----- ------ - ----
----------------------- ----------- ------ --------------- -- -
  ---------------------
-------------- -- -
  -----------------
---

总结

以上就是 zeen 的使用方法,它可以帮助我们在前端开发中快速地对图片进行各种操作。如果你希望了解更多关于 zeen 的信息,可以前往它的官方文档查看。

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

纠错
反馈