npm 包 esn_img 使用教程

在前端开发过程中,处理图片是非常常见的操作。我们可以使用一些工具包或者 npm 包来实现对图片的处理。本文将介绍如何使用 npm 包 esn_img 来实现图片的处理和在线压缩,并提供示例代码和详细教程。

esn_img

esn_img 是一个基于 Node.js 的 npm 包,它可以帮助你处理图片并进行在线压缩。它支持多种格式的图片,例如 png、jpg、jpeg 等。它可以帮助你压缩图片的大小,同时保持图片的质量。

如何使用 esn_img

首先,我们需要用 npm 安装 esn_img。

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

然后,我们可以在代码中引入 esn_img。

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

接着,我们可以使用 esn_img 提供的 API 来处理图片。下面是一个简单的例子,它可以读取一张图片并进行压缩。

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

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

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

在上面的代码中,我们首先定义了输入图片的路径、输出图片的路径和图片处理的选项。然后,我们调用 esn_img 函数,传入这些参数。最后,我们使用 Promise 来处理结果。

在这个例子中,我们将输入图片的宽度设置为 800,压缩质量为 60,并打开了调试模式(debug:true)。你可以根据自己的需求来设置这些选项。

esn_img 的 API

esn_img 提供了以下常用的 API:

esn_img(input, [output], [options])

使用该 API 可以将图片压缩并保存到指定位置。

  • input: 输入的图片路径。可以是一个字符串或者 Buffer 类型。必选参数。

  • output: 压缩后输出的图片路径。可以是一个字符串或者一个 Node.js 的 Writable 流。如果没有传入该参数,则会使用一个默认值。可选参数。

  • options: 图片压缩的选项。可以是一个对象,其中包含以下键值:

    • width: 图片的宽度。如果没有传入该参数,则不会限制图片的宽度。可选参数。
    • height: 图片的高度。如果没有传入该参数,则不会限制图片的高度。可选参数。
    • quality: 图片的压缩质量。取值范围为 0 到 100。如果没有传入该参数,则会使用默认值 80。可选参数。
    • debug: 是否开启调试模式。默认为 false。可选参数。

返回一个 Promise 对象,它的 resolve 值是输出图片的路径。

esn_img.compress(input, [options])

使用该 API 可以将图片压缩并返回一个 Buffer 对象。

  • input: 输入的图片路径。可以是一个字符串或者 Buffer 类型。必选参数。

  • options: 图片压缩的选项。可以是一个对象,其中包含以下键值:

    • width: 图片的宽度。如果没有传入该参数,则不会限制图片的宽度。可选参数。
    • height: 图片的高度。如果没有传入该参数,则不会限制图片的高度。可选参数。
    • quality: 图片的压缩质量。取值范围为 0 到 100。如果没有传入该参数,则会使用默认值 80。可选参数。

返回一个 Promise 对象,它的 resolve 值是一个 Buffer 对象。

示例代码

下面是一个完整的示例代码,它可以读取一张图片并进行压缩。你可以将该代码保存到一个文件中,然后使用 Node.js 执行该文件。

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

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

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

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

总结

esn_img 是一个非常方便实用的 npm 包,它可以帮助我们对图片进行处理和在线压缩。本文介绍了如何使用 esn_img,并提供了详细的示例代码和 API。希望本文对您有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055fcc81e8991b448dd529


猜你喜欢

  • npm 包 arcgis-jupyter-widgets 使用教程

    在前端开发中,npm 包是一个非常重要的工具。arcgis-jupyter-widgets 是一个基于 ArcGIS API for JavaScript 的 Jupyter Notebook 插件,...

    3 年前
  • npm 包 hmp-uppercase 使用教程

    前言 在前端开发过程中,我们经常需要对字符串进行大小写转换的操作。而其中一种常见的转换是将字符串转换为全大写或全小写,这个过程是比较繁琐的。为了解决这个问题,我们可以使用一个 npm 包,也就是 hm...

    3 年前
  • npm 包 @danywits/randomcolor 使用教程

    简介 随机颜色是前端开发中常用的一个功能,比如在给元素设置背景颜色时使用。但是自己写随机颜色函数并不方便,因为需要考虑边界情况、去重颜色等问题。@danywits/randomcolor 就是一个可以...

    3 年前
  • npm 包 linh-capitalize 使用教程

    在前端开发过程中,我们常常需要对字符串进行处理,其中一个常见的操作就是将字符串首字母大写。虽然 JavaScript 提供了 toUpperCase() 方法,但它只能将整个字符串转为大写,而不能只转...

    3 年前
  • npm 包:br.com.phonegap.plugin.backgroundservicenotification 使用教程

    简介 本文介绍 npm 包 br.com.phonegap.plugin.backgroundservicenotification 的使用教程。该插件主要用于在后台模式下显示通知。

    3 年前
  • npm 包 react-native-lazyload-components 使用教程

    React Native 是当前主流的移动端跨平台开发框架之一,其支持的第三方组件库丰富多彩,但是对于大数据量场景下的图片加载问题仍然没有很好的解决方案。为了解决这个问题,开发者需要使用到一些专门的组...

    3 年前
  • npm 包 js-data-cache 使用教程

    前言 在前端开发中,数据缓存是非常常见的需求。而在处理数据缓存时,我们通常使用 localStorage、sessionStorage 等浏览器提供的 API。但是,这些 API 只能存储字符串类型的...

    3 年前
  • npm 包 node-abac 使用教程

    ABAC (Attribute-Based Access Control) 是一个基于属性的访问控制模型。它使用属性来描述资源和权限,并根据这些属性来做出访问控制决策。

    3 年前
  • npm 包 @brycemarshall/event-throttle 使用教程

    在前端开发中,为了提高用户体验,我们经常需要限制事件的频繁触发,比如滚动事件、窗口大小改变事件等等。这里介绍一种使用 npm 包 @brycemarshall/event-throttle 来限制事件...

    3 年前
  • npm 包 insight-api-hush 使用教程

    如今,随着互联网和数字货币的迅速发展,区块链技术也逐渐引起人们的关注。作为区块链技术中的一种,hush是一种基于zcash协议的加密货币,而insight-api-hush则是其区块链浏览器。

    3 年前
  • npm包basy使用教程

    在前端开发中,我们会经常使用到第三方的npm包来完成一些任务,例如现在我们就要介绍一个可以帮助我们加快前端开发进程的npm包——basy。 什么是basy basy 是一款用于构建web前端开发工作流...

    3 年前
  • npm 包 bitcore-lib-hush 使用教程

    在前端开发中,有时候我们需要使用加密货币的相关功能,例如发送和接受交易,生成钱包地址等等。而 bitcore-lib-hush 是一个用于较新版本的比特币和其它加密货币的 JavaScript 库。

    3 年前
  • npm 包 bitcore-message-hush 使用教程

    在前端开发中,我们常常需要对数字货币进行快速且安全的交易,因此我们需要一些专用的工具来实现这些交易功能。bitcore-message-hush 就是这样一个工具,它是一个 JavaScript 库,...

    3 年前
  • npm 包 insight-ui-hush 使用教程

    insight-ui-hush 是一个基于 Node.js 的 npm 包,提供了一个针对 Hush 区块链网络的区块浏览器前端 UI,可以让开发者轻松地在自己的网站或应用中集成 Hush 区块链浏览...

    3 年前
  • npm 包 @coderbox/molecules 使用教程

    介绍 @coderbox/molecules 是一个前端开发中常用的组件库,包含了一些常用的 UI 组件。 使用@coderbox/molecules 可以帮助我们实现更快速,更有效地构建应用程序。

    3 年前
  • npm 包 ng-next-select 使用教程

    在前端开发中,使用好的组件库可以提高开发效率、减少冗余代码以及实现优秀的用户体验。其中,AngularJS 是一个非常流行的前端框架,而 ng-next-select 是一个在 AngularJS 中...

    3 年前
  • npm 包 postcss-extend-class 使用教程

    npm 包 postcss-extend-class 是一个可以帮助你在 CSS 中使用类的扩展和继承的工具。如果你经常编写 CSS,那么这个工具对你来说会非常有用。

    3 年前
  • npm 包 mojs-surface 使用教程

    有时候为了更好的用户体验,我们需要给网页添加一些动效,而现在前端技术日益发展,越来越多的库和框架能够帮助我们快速地创建出想要的动画效果。其中,mojs-surface 是一个非常好用的 npm 包,它...

    3 年前
  • npm 包 email-encoder 使用教程

    前言 在前端开发中,我们经常需要使用到邮件地址。然而,直接在页面中呈现邮件地址可能会被爬虫抓取,这会有资料泄露的风险。为了防止这种情况的发生,我们可以使用 email-encoder 这个 npm 包...

    3 年前
  • npm 包 gulp-email-encoder 使用教程

    在前端开发中,为了避免邮件地址被自动爬取,我们需要对邮件地址进行加密处理。其中一种实现方式就是使用 gulp-email-encoder 这个 npm 包。 安装 使用 npm 安装: --- ---...

    3 年前

相关推荐

    暂无文章