基于casperjs和rewright . js的像素对比服务的实现

前言

这次我们共享一个节点服务，提供设计稿和前端页面的像素对比，旨在为测试或者前端人员自己完成一个辅助测试。相信我，在像素级对比下，网页对设计稿的还原程度会突然变得突出。下面就不多说了。我们来看看详细的介绍。

效果预览

先验知识

这次，以下两个库被用作辅助工具：

Casperjs:基于PhantomJS编写。里面有一个无界面浏览器。简单来说就是可以用它以代码的形式模拟人来完成浏览器操作，这就涉及到各种鼠标事件等等。这次，你主要使用它附带的截图功能。类似. js:图像像素比较工具。调用一个方法简单理解为传入两个图，返回一个带有差异度等比较参数的张和成图。基本实现思路可以理解为：将图片转换成画布后，获取图像像素，然后对每个像素进行一次比较。所以我们对整个服务要有一个大的想法，就是进入一个网站，通过casperjs截取一个页面，然后和设计图对比，得到结果。

整体思维

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

从首页接收设计稿图片和需要截取的网址、节点信息，将设计稿保存到images文件夹，启动子流程，启动casperjs。截取目标网站后，让form.html填写图片地址信息，发回服务器获取图片信息。将截取的图片与设计稿进行对比，通过重组js发送回首页。可能有人注意到的一个问题是：为什么在casperjs中拍摄目标网站截图后不能直接将信息发回服务器，而是选择打开表单页面以表单的形式提交信息？

答：首先，我对casperjs和node了解不多。我理解的是，casperjs不是一个节点模块，它运行在操作系统中。我还没有找到如何与casperjs中的节点服务建立通信。如果有什么办法，请告诉我，因为我真的不认识卡斯柏！其次，因为无法建立沟通，只能退而求其次。我可以快速打开一个我通过casper写的表单页面，填写图片信息，然后发送回服务器。这可以满足我最初的诉求。以上就是from.html的操作。

实施细节

实现一个简单的静态服务器

因为涉及到index.html和form.html页面的返回，所以需要实现一个超级简单的静态服务器。代码如下：

const MIME _ TYPE={ ' CSS ' : ' text/CSS '，' gif': 'image/gif '，' html': 'text/html '，' ico': 'image/x-icon '，' jpeg': 'image/jpeg '，' jpg': 'image/jpg '，' js': 'text/javascript '，' json': 'application/json '，' pdf 'Ext.slice (1) :“未知”让内容类型=mime _ type[ext]| |“text/plain”//与文件类型fs.readfile(文件路径，函数(err，Data){ if(err){ send 500(RES)} else { RES . write head(200，{ ' content-type ' : content type })RES . end(Data)} })}匹配分析表单并将图片存储在images文件夹中

常数多方=require('多方')//解析表单让形式=新多方Form() form.parse(req，function (err，fields，files){ let filename=files[' file '][0].originalFilename，TargetPath=_ _ dirname/' images/'文件名，if(filename){ fs。CreateReadStream(文件['文件'][0]).路径)。管道(fs。createwritestream(TargetPath)).} })通过创建可读流读出文件内容，再通过管写入到制定路径下即可保存上传来的图片。

运行卡斯帕射流研究…

const { spawn }=require(' child _ process ')spawn(' Casper . js '，['casper.js '，filename，captureUrl，selector，id]))Casper js . stdout . on(' data '，(data)={ 0.}) 通过卵可以创建子进程来启动卡斯帕js，同样也可以使用高级管理人员等。

截图并提交数据到form.html

const system=require(' system ')const host=' http://10。2 .45 .110:3033 ' const Casper=require(' Casper ').创建({ //浏览器窗口大小视口大小： {宽度： 1920，高度： 4080 } })const FIlename=decodeURIComponent(系统。args[4])const URL=decodeURIComponent(系统。args[5])const selector=decodeURIComponent(system。args[6])const id=decodeURIComponent(system。参数[7])常量时间=新日期().getTime()Casper。开始(网址)卡斯帕。然后(function(){ console。日志('正在截图请稍后)this.captureSelector(' ./images/Casper“id time ”.' png '，选择器)})卡斯珀。然后(function(){ Casper。start(host/form)。html '，function(){ this。填充('表单#联系人表单'，{ 'diff': ' ./images/Casper“id time ”.png '，'点' : '。/images/' fileName '，id': id }，true) })})casper.run()代码还是比较简单的，主要过程就是打开一个页面，然后在然后中传入你的操作，最后执行快跑。在这个过程里我不太知道如何与结节服务通信，故选择了再开一个页面。想深入研究的可以去看卡斯帕射流研究…的官网非常详尽！

通过类似。射流研究…进行像素比对并返回数据

函数完成（数据){让imgName='diff '新日期().getTime()' .' png '，imgUrl，analysisTime=data.analysisTime，mismatchpercent=data。不匹配百分比，结果Url=' ./images/' imgName fs。writelefilesync(结果URL，数据。getbuffer())imgObj={ 0.}让ReSound=ResoBj[id]//找回最开始的表示留数返回给页面数据结果=相似(不同).比较（点)。ignoreColors().完成（完整)这其中涉及到了一个点，即我现在所得到的结果要返回给最初的请求里，而从一开始的请求到现在我已经中转了多次，导致我现在找不到我最初的返回体表示留数了。想了很久只能暂时采用了设定全局对象，在接收最初的请求后将请求者的互联网协议(互联网协议的缩写)和时间戳设定为唯一编号存为该对象的键，值为当前的res。同时整个中转流程中时刻传递id，最后通过调用resObj[id]来得到一开始的返回体，返回数据。这个方法我不认为是最优解，但是鉴于我现在想不出来好方法为了跑通整个服务不得已。如果有新的思路请务必告知！

部署

安装幻影JS(osx)

官网下载：phantomjs-2.1.1-macosx.zip

解压路径：/User/XXX/phantom js-2。1 .1-macosx

添加环境变量：~/.bash_profile文件中添加

导出路径=' $ PATH :/Users/XXX/phantom js-2。1 .1-macosx/bin '

末端的输入：phantomjs -版本

能看到版本号即安装成功

安装卡斯帕射流研究…

啤酒更新啤酒安装卡斯帕js安装类似。射流研究…

cnpm i相似性js /已写进帕克克森可不用安装啤酒安装pkg-config cairo lib png JPEG giflibcnpm I canvas//节点内运行canvasnode服务

饭桶克隆https://github.com/Aaaaaaaty/gui-auto-test.gitcd图形用户界面-自动测试cnpm ICD pxdiffnodemon服务器。射流研究…打开http://localhost :3033/索引。超文本标记语言

惯例邮局作者的博客，不定时更新中——

参考文献

PhantomJS安装卡斯帕射流研究…文档类似。射流研究…文档总结

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。