什么是npm
npm 是 JavaScript 世界的包管理工具。是node.js的包管理工具。npm提供了命令行工具以供用户分享、下载、安装包，以及管理项目依赖关系的功能。
img-compare是什么
img-compare是一个 npm 包，可以用于图片对比。这个包可以将两张图片进行比较并生成一个比较出来的结果图片。在前端开发中，图片的压缩和优化是一个非常重要的环节，而img-compare则可以对比两张图片，方便我们进行对比结果的分析。
安装
在命令行中输入以下命令，在你的项目文件夹中安装img-compare：
npm install img-compare --save-dev
如果无法安装，可以试试到npm官网下载安装源代码：
npm install https://github.com/tianhuil/img-compare
使用img-compare
安装完成之后，我们就可以使用img-compare进行比较图片了。以下是使用方法和代码示例：
-- -------------------- ---- -------
----- -- - --------------
----- ------------- - -----------------------
----- ------ - --------------------------------
----- ------ - --------------------------------
----- ------- - -
------- -
---- ----------
------ ----------
----- ---------
-
--
--------------------- ------- -------- -------- ----- ----- -
-- ----- -----------------
-------------------------------- ------------------
-----------------------------------
---options
options是一个可选参数，用于控制输出图片的效果。下面是options的详细说明：
色值映射
const options = {
output: {
red: '#ff0000',
green: '#00ff00',
blue: '#0000ff'
}
};在对比图片时，img-compare会将像素点（R,G,B）值与options中定义的颜色值进行比较，如果像素点的（R,G,B）值越接近哪一种颜色，比较结果图片上对应像素点的颜色就会越接近这个色值。可选参数red、green和blue分别代表红、绿、蓝三种颜色通道。
区分度
const options = {
threshold: 1.5
};如果两张图片像素点不一样，它们之间的差异非常微小，原图像素点的值可能是（255,255,255），而新图像素点的值可能是（254，255，255），我们需要设置一个阈值，只有当像素点的差异大于这个阈值时，img-compare才会将它们标注为对比不一致的像素点。默认阈值为1.5。
如果想要调整不同图像点阈值不同的方式，可以使用像素亮度阈值，将像素值转换为灰度，并与阈值进行比较。
const options = {
brightThreshold: 30
};统计
const options = {
stats: true
};将会创建一个数据结构，用于存储每个颜色的计数值。可以通过像这样的方式来获取结果：
const stats = data.getStats(); console.log(stats);
##总结
在前端开发中，img-compare可以方便的进行图片对比，使得我们可以轻松发现两张图片的差异点，而不需要一点一点的手动寻找差异。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74466