前言
在前端开发中,很多时候需要比较两个网页的差异性,来调试问题或者监测爬虫等情况。本文将要介绍一种npm包—niffy,可以方便地帮助开发者完成网页截图并比较,以及输出差异性的相关信息。
niffy的介绍
niffy是一种npm包,可以对两张图片的不同进行比较,同时在控制台输出整张图片的相似度和两张图片的不同点的数量和颜色差异。
niffy的安装
使用npm安装
--- ------- -----
niffy的基本用法
1. 调用niffy包
----- ----- - -----------------
2. 使用capture()
函数生成两张网页的截图
--- ------- - - ------ ----- ------- --- -- --- ---- - ------------------------- -------------------------- --- ------ - ----- -------------------------- -- - ------ ------------------ --------- ----
3. 使用compare()
函数比较这两张图片
--- ------ ----------------- -------------------- -------------------- -------------------- ----------------- - ------------------------ ----------- ------------------ ---------- ------------------------------ ---------------------- --------------------------------- ------------------------- --------------------------------- ------------------------- --------------------------------- ------------------------- ------------------------------ ----------------------
4. 将结果输出到控制台
----- ------ ----------------- ---- -------------------- - ------ -- ------- - - -------------------- ---- -------------------- ---- ----------------- ------
niffy的高级用法
1. 根据图片差异性以及不同位置,生成结果图片
--- ----------- - ---------------------------------- ----------- --- -- - -------------- --- ---- - ---------------- --- ---------- - -------------------- -------------- ----- ---------------------------- -------------
2. 使用qunit进行测试
--- - ------- ----- ----- ------ - - ----------------- -------------------------- ---------- - ---------- ----- -- -- ---------- -- ------ ------ --- ----- ---------------- - --- ----- - ----- ---------------------------------------------------- - ------ ----- ------- --- --- --- ------ - -------------------- ------- ------------------- ------ ------ --- ------- ------------------------ -- ---- ------ --- --- ------- --- ---------- ----- --- ----------- -- ------ -- ---------- ----- ---------------- - --- ---- - - -------------------------------------- ------------------------------------- -- --- ------ - ----- -------------------------- -- - ------ ------------------ - ------ ----- ------- --- --- ---- --- ------ - ------------------------ ----------- ------------------- ------ ------ --- ------- --------------------------- -- ---- ------ --- ------------ --- ---
niffy包的局限性
niffy依赖PhantomJS和Cairo来生成和处理图片。目前,PhantomJS已基本停止更新和维护,而Cairo只支持一些操作系统。如果您是在使用Windows系统进行开发,您将无法使用niffy。
另外,生成的结果图片中,颜色是以rgba形式展现的,如果需要其他展示颜色的类型,需要自己处理。
总结
本文以niffy作为例子,展示了如何使用npm包进行操作,同时也向大家介绍了一些基本概念和注意事项。要在前端开发中使用npm,需要对npm的依赖性和平台问题进行了解,只有深入掌握它们,在实际开发中才能更加得心应手。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedd60bbb4e78292a6fb88d