先验知识

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

Casperjs:基于PhantomJS编写。里面有一个无界面浏览器。简单来说，你可以用它以代码的形式模拟人来完成浏览器操作，这涉及到各种鼠标事件等等。这次你主要是用它附带的截图功能。

类似. js:图像像素比较工具。调用一个方法简单理解为传入两个图，返回一个带有比较参数如差异度等的张和成图。基本实现思路可以理解为：图片转换成画布后，获取图像像素，然后每个像素比较一次。

所以我们对整个服务要有一个大的想法，就是进入一个网站，通过casperjs截取一个页面，然后和设计图对比就可以得到结果。

整体思维

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

从首页接收设计草图图片和需要截取的网址和节点信息

将设计草稿保存到图像文件夹中

打开子进程，启动casperjs，完成对目标网站的拦截

截取后，请求form.html填写图片地址信息，并再次发送回服务器

服务器获取图片信息，并通过重组将截取的图片与设计草图进行比较

结果被返回到首页

可能有人会注意到的一个问题是：为什么在casperjs中截取目标网站的截图后不能直接将信息发回服务器，而是选择打开另一个表单页面以表单的形式提交信息？

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

实施细节

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

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

const MIME_TYPE={

css': '文本/css '，

gif': 'image/gif '，

html': '文本/html '，

ico': '图像/x-图标'，

jpeg': '图像/jpeg '，

jpg': 'image/jpg '，

js': '文本/javascript '，

json': '应用/json '，

pdf': '申请/pdf '，

png': '图像/png '，

svg': '图像/svg xml '，

swf': '应用/x-shockwave-flash '，

tiff': '图像/tiff '，

txt': '文本/普通'，

wav': '音频/x-wav '，

wma': '音频/x-ms-wma '，

wmv': '视频/x-ms-wmv '，

xml': 'text/xml '

}

函数发送文件(文件路径，资源){

Open(文件路径，' r '，函数(err){//根据路径打开文件。

if(err){

send404(res)

}else{

让ext=path.extname(filePath)

ext=ext？ext.slice(1) : '未知'

让内容类型=mime _ type[ext]| |“text/plain”//与文件类型匹配

fs.readFile(filePath，function(err，data){

if(err){

send500(res)

}else{

res.writeHead(200，{ ' content-type ' : content type })

res.end(数据)

}

})

}

})

}

解析表单并将图片存储在图像文件夹中

Const多方=require('多方')//解析表单

let form=新多方。表单()

form.parse(req，function (err，fields，files) {

让filename=files['file'][0]。originalFilename，

targetPath=__dirname '/images/'文件名，

if(文件名){

fs.createReadStream(文件['文件'][0]。路径)。管道(fs . CreateWriteStream(TargetPath))

.

}

})

通过创建一个可读的流，读出文件的内容，然后通过管道写到建立的路径，保存上传的图片。

运行casperjs

const {产卵}=require('child_process ')

产卵(' casperjs '，['casper.js '，文件名，捕获Url，选择器，id])

casperjs.stdout.on('data '，(data)={

.

})

通过卵可以创建子进程来启动casperjs，同样也可以使用管理人员等。

截图并提交数据到form.html

const system=require('system ')

const host=' http://10。2 .43 ' http://333

const casper=require('casper ').创建({

//浏览器窗口大小

viewportSize: {

宽度： 1920,

高度： 4080

}

})

const FIlename=DecoDeuri组件(系统。args[4])

const URL=DecoDeuri组件(系统。args[5])

const selector=DecoDeuri组件(系统。args[6])

const id=DecoDeuri组件(系统。args[7])

常量时间=新日期()。getTime()

casper.start(url)

casper.then(function() {

console.log('正在截图请稍后)

this.captureSelector(' ./images/Casper"id time "，"' png '，选择器)

})

casper.then(function() {

casper.start(host '/form.html '，function() {

this.fill('form#contact-form '，{

diff': ' ./images/Casper"id time " .' png '，

点' : '。/images/'文件名，

id': id

},真)

})

})

casper.run()

代码还是比较简单的，主要过程就是打开一个页面，然后在然后中传入你的操作，最后执行跑步。在这个过程里我不太知道如何与结节服务通信，故选择了再开一个页面。想深入研究的可以去看casperjs的官网非常详尽！

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

功能完成（数据){

让imgName='diff '新日期()。getTime()' ' .' png '，

imgUrl，

analysisTime=data.analysisTime，

不匹配百分比=数据。不匹配百分比，

结果Url=' ./images/' imgName

fs.writeFileSync(resultUrl，data.getBuffer())

imgObj={

.

}

让ReSound=ResoBj[id]//找回最开始的决心返回给页面数据

重发。写头(200,{ '内容类型' : '应用程序/json'})

重发。结束(JSON.stringify(imgObj))

}

让结果=相似（不同)。比较（点)。ignoreColors().完成（完整)

这其中涉及到了一个点，即我现在所得到的结果要返回给最初的请求里，而从一开始的请求到现在我已经中转了多次，导致我现在找不到我最初的返回体决心了。想了很久只能暂时采用了设定全局对象，在接收最初的请求后将请求者的互联网协议(互联网协议的缩写)和时间戳设定为编号存为该对象的键值为当前的res .同时整个中转流程中时刻传递id，最后通过调用resObj[id]来得到一开始的返回体，返回数据。这个方法我不认为是更优解，但是鉴于我现在想不出来好方法为了跑通整个服务不得已。如果有新的思路请务必告知！

部署

安装PhantomJS(osx)

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

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

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

export PATH=' $ PATH :/Users/XXX/phantom js-2。1 .1-macosx/bin '

末端的输入：phantomjs -版本

能看到版本号即安装成功

安装casperjs

啤酒更新啤酒安装casperjs

安装类似。射流研究…

cnpm i相似性js //已写进packjson可不用安装

啤酒安装pkg-config cairo lib png JPEG gif lib

cnpm I canvas//节点内运行帆布

结节服务

饭桶克隆https://github.com/Aaaaaaaty/gui-auto-test.git

光盘图形用户界面自动测试

cnpm i

cd pxdiff

nodemon server.js

打开http://localhost :3033/index。超文本标记语言