简介
brightness 是一个可以用于实现前端图片亮度调整的 npm 包。该包采用 JavaScript 编写，可以帮助开发者在不影响原始图像的情况下，通过调整图像亮度以达到特定的美学效果。本文将为大家介绍如何使用 brightness 包来实现前端亮度调整。
安装
你可以使用以下命令在你的项目中安装 brightness 包。
npm install brightness --save
用法
使用 brightness 前，请确保你已经在你的项目中引入这一包。引入后，你需要创建一个 Image 或 HTMLCanvasElement 对象，然后调用 brightness 来调整图像亮度。
API
以下是使用 brightness 时可用的 API：
/**
* 通过调整图像亮度来创建 ``ImageData``
*
* @param {ImageData|HTMLCanvasElement|HTMLImageElement} image 图像对象
* @param {Number} brightness 亮度值，初始值为 0
* @returns {ImageData} 包含应用新调整的亮度值的新 ``ImageData`` 对象.
*/
function brightness(image, brightness) {}示例
下面让我们通过实现一个简单的示例来演示如何使用 brightness 包来调整图像亮度。
-- -------------------- ---- -------
--------- -----
------
------
----------------- ------------
-------
------
---------------
-----
---- -------- -----------------
------- ----------------------------------
------- --------------------------------
------
------- ------------------------------------------------
--------
----- --- - -------------------------------
-------- ---------- -
----- ------------ - --------------- ----
----- ------ - ---------------------------------
------------ - ----------------
------------- - -----------------
----- --- - ------------------------
------------------------------ -- ---
------- - -------------------
-
-------- -------- -
----- ------------ - --------------- -----
----- ------ - ---------------------------------
------------ - ----------------
------------- - -----------------
----- --- - ------------------------
------------------------------ -- ---
------- - -------------------
-
---------
-------
-------在以上示例中，我们创建了一个 HTML 页面，并在其中引入了 brightness。当用户单击“增加亮度”按钮时，brighten() 函数会被调用。该函数使用 brightness 递增图像亮度，并将该亮度值应用到当前图像中。当用户单击“减小亮度”按钮时，darken() 函数会被调用。该函数使用 brightness 来递减图像亮度。
总结
brightness 是一个非常有用的 npm 包，可以帮助前端开发者快速轻松地实现图像亮度调整。通过本文所述的步骤和示例，你也可以轻松上手并使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde5071