基于casperjs、resemble.js实现一个像素对比服务

写在最前

本次分享一个提供设计稿与前端页面进行像素对比的node服务，旨在为测试或者前端人员自己完成一个辅助性测试。相信我，在像素级别的对比下，网页对设计稿的还原程度一下子就会凸显出来。。如果哪位童鞋用这个功能测了某位前端小哥哥的页面发现了问题，请不要说是我提供的这个工具=。=

效果预览

前置知识

本次用到了以下两个库作为辅助工具：

• casperjs：基于PhantomJS的编写。其内部提供了一个无界面浏览器，简单来说用它你可以以代码的形式来完成模拟人来操作浏览器的操作，其中涉及鼠标各种事件，等等非常多的功能，本次主要使用其附带的截图功能。
• resemble.js:图片像素对比工具。调用方法简单理解为，传入两张图，返回一张合成图并附带对比参数如差别度等等。基本实现思路可以理解为通过将图片转为canvas后，获取其图像像素点，之后对每个像素点进行一次比对。

所以整个服务我们应该已经有了大题的思路即通过casperjs来进入某个网站截取某个页面，再将其与设计图进行比对得出结果。

整体思路

image

通过上图我们应该能整理出一个大概的流程：

1. 从前端页面接收设计稿图片及需要截取的网站地址与节点信息
2. 将设计稿保存到images文件夹
3. 开启子进程，启动casperjs，完成对目标网站的截取
4. 截取后请求form.html将图片地址信息填入并重新传回服务器
5. 服务端获取图片信息通过resemblejs将截取图与设计稿进行比对
6. 结果传回前端页面

这其中有一个问题可能会有人注意到就是：为什么在casperjs中对目标网站截图了不能直接把信息传回服务器中，而是选择了再去打开一个表单页面通过表单的形式来提交信息？

答：首先我对casperjs和node了解都不那么深入，我理解的是首先casperjs不是一个node模块，它是跑在操作系统中的，我尚且没有发现怎么在casperjs中建立与node服务的通