在前端开发中，很多时候需要对图片进行一些处理，其中之一就是二值化。二值化是将图片上的每个像素点的灰度值置为黑或白，其实就是把图片变成黑白的效果。而这个过程中的一个重要操作就是阈值分割，也就是将像素点根据不同的阈值来判断是黑还是白。在实现阈值分割的过程中，我们可以使用一个 npm 包叫做 adaptive-threshold，它可以根据图像边缘和噪声的情况自适应调整阈值，从而得到更好的效果。
安装
在使用 adaptive-threshold 之前，需要先安装它。可以使用 npm 进行安装，命令如下：
npm install adaptive-threshold
如果你想在全局使用，可以加上 -g 参数。
使用
adaptive-threshold 的使用非常简单，只需要传入图像数据和阈值即可。下面是一个示例代码：
-- -------------------- ---- -------
----- ----------------- - ------------------------------
-- ------
----- --------- - -
----- -------------
---- ---- --- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ---
---
------ --
------- -
--
-- ----
----- --------- - ----
-- ------
----- ---------- - ---------------------------- -----------
------------------------上面的代码中，我们定义了一个 8 位灰度图像数据，这个图像数据是由一些灰度值组成的，每个灰度值占 1 个字节。在图像数据中，每 4 个字节代表 1 个像素点，前 3 个字节代表 R、G、B 三个通道的值，最后一个字节代表 Alpha 通道的值。因为我们使用的是灰度图像，所以只需要使用第一个字节即可。在定义完图像数据后，我们定义了阈值，然后把图像数据和阈值传入 AdaptiveThreshold 函数中即可。最后输出得到的结果。
进阶应用
除了基本的使用外，adaptive-threshold 还支持一些进阶的应用，例如：
自动计算阈值
我们可以使用 adaptive-threshold 中的 computeThreshold 函数来自动计算阈值。这个函数会根据图像的边缘和噪声情况自适应地计算阈值，从而得到一个更好的效果：
-- -------------------- ---- -------
----- ----------------- - ------------------------------
-- ------
----- --------- - -
----- -------------
---- ---- --- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ---
---
------ --
------- -
--
-- ------
----- --------- - ----------------------------------------------
-- ------
----- ---------- - ---------------------------- -----------
------------------------使用回调函数进行超参数调整
如果你想自己调整一些超参数并手动进行阈值分割，可以使用 adaptive-threshold 的 process 函数。这个函数可以接收一些回调函数，包括：
prepare：预处理图像数据，例如对图像进行高斯滤波、锐化等操作；threshold：计算阈值；apply：应用阈值分割算法。
-- -------------------- ---- -------
----- ----------------- - ------------------------------
-- ------
----- --------- - -
----- -------------
---- ---- --- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ----
---- ---- ---- ---
---
------ --
------- -
--
-- -------
----- ------- - --------- -- -
-- --------
--
----- --------- - --------- -- -
-- ----
------ ----
--
----- ----- - ----------- ---------- -- -
-- --------
------ ---------------------------- -----------
--
-- -- ------- --
----- ---------- - ------------------------------------ -
--------
----------
-----
---
------------------------指导意义
使用 adaptive-threshold 可以方便地实现图像的阈值分割，从而得到二值化的效果。在实际项目中，我们可以将其应用在一些图像处理或计算机视觉相关的场景中，例如识别验证码、车牌号等。
但是需要注意的是，adaptive-threshold 只是一个阈值分割算法，并不能处理图像中的文字、图片的几何形状等问题。如果需要处理这些问题，需要使用其他的算法或工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005543e81e8991b448d191a