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

前言

本次分享一个提供设计稿与前端页面进行像素对比的node服务，旨在为测试或者前端人员自己完成一个辅助性测试。相信我，在像素级别的对比下，网页对设计稿的还原程度一下子就会凸显出来。下面话不多说了，来一起看看详细的介绍吧。

效果预览

前置知识

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

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

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

整体思路

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

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

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

答：首先我对casperjs和node了解都不那么深入，我理解的是首先casperjs不是一个node模块，它是跑在操作系统中的，我尚且没有发现怎么在casperjs中建立与node服务的通信，如果有方法一定要告诉我，因为我真的不太了解casper！其次由于无法建立通信，我只能退而求其次，通过casper快速打开一个我写好的表单页面并且填写好图片信息传回服务器，这么做是可以完成最初的诉求。所以就有了上面from.html那段的操作。

实现细节

实现一个简易静态服务器

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

rush:js;"> 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": "application/pdf","png": "image/png","svg": "image/svg+xml","swf": "application/x-shockwave-flash","tiff": "image/tiff","txt": "text/plain","wav": "audio/x-wav","wma": "audio/x-ms-wma","wmv": "video/x-ms-wmv","xml": "text/xml" } function sendFile(filePath,res) { fs.open(filePath,'r+',function(err){ //根据路径打开文件 if(err){ send404(res) }else{ let ext = path.extname(filePath) ext = ext ? ext.slice(1) : 'unkNown' let contentType = MIME_TYPE[ext] || "text/plain" //匹配文件类型 fs.readFile(filePath,function(err,data){ if(err){ send500(res) }else{ res.writeHead(200,{'content-type':contentType}) res.end(data) } }) } }) }

解析表单并将图片存储到images文件夹

rush:js;"> const multiparty = require('multiparty') //解析表单 let form = new multiparty.Form() form.parse(req,function (err,fields,files) { let filename = files['file'][0].originalFilename,targetPath = __dirname + '/images/' + filename,if(filename){ fs.createReadStream(files['file'][0].path).pipe(fs.createWriteStream(targetPath)) ... } })

通过创建可读流读出文件内容，再通过pipe写入到制定路径下即可保存上传来的图片。

运行casperjs

{ ... })

通过spawn可以创建子进程来启动casperjs，同样也可以使用exec等。

截图并提交数据到form.html

rush:js;"> const system = require('system') const host = 'http://10.2.45.110:3033' const casper = require('casper').create({ // 浏览器窗口大小 viewportSize: { width: 1920,height: 4080 } }) const fileName = decodeURIComponent(system.args[4]) const url = decodeURIComponent(system.args[5]) const selector = decodeURIComponent(system.args[6]) const id = decodeURIComponent(system.args[7]) const time = new Date().getTime() casper.start(url) casper.then(function() { console.log('正在截图请稍后') this.captureSelector('./images/casper'+ id + time +'.png',selector) }) casper.then(function() { casper.start(host + '/form.html',function() { this.fill('form#contact-form',{ 'diff': './images/casper'+ id + time +'.png','point': './images/' + fileName,'id': id },true) }) }) casper.run()

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

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

export PATH="$PATH:/Users/xxx/phantomjs-2.1.1-macosx/bin"

terminal输入：phantomjs --version

能看到版本号即安装成功

安装casperjs

安装resemble.js

node服务

打开http://localhost:3033/index.html

惯例po ，不定时更新中——

参考文献

nofollow" target="_blank" href="https://github.com/Huddle/Resemble.js">resemble.js 文档

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。

casperjs nodejs nodejs