介绍
这篇文章将为大家详细讲解有关如何基于casperjs和类似。js实现一个像素对比服务,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
js是什么 js是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
<>强效果预览
<李>
casperjs:基于PhantomJS的编写。其内部提供了一个无界面浏览器,简单来说用它你可以以代码的形式来完成模拟人来操作浏览器的操作,其中涉及鼠标各种事件,等等非常多的功能,本次主要使用其附带的截图功能。
<李> 相似。js:图片像素对比工具。调用方法简单理解为,传入两张图,返回一张合成图并附带对比参数如差别度等等。基本实现思路可以理解为通过将图片转为画布后,获取其图像像素点,之后对每个像素点进行一次比对。
所以整个服务我们应该已经有了大题的思路即通过casperjs来进入某个网站截取某个页面,再将其与设计图进行比对得出结果。
<强>整体思路
<强> 
<强>通过上图我们应该能整理出一个大概的流程:
<李> 从前端页面接收设计稿图片及需要截取的网站地址与节点信息
<李> 将设计稿保存到图像文件夹
<李> 开启子进程,启动casperjs,完成对目标网站的截取
<李> 截取后请求form.html将图片地址信息填入并重新传回服务器
<李> 服务端获取图片信息通过resemblejs将截取图与设计稿进行比对
<李> 结果传回前端页面
这其中有一个问题可能会有人注意到就是:为什么在casperjs中对目标网站截图了不能直接把信息传回服务器中,而是选择了再去打开一个表单页面通过表单的形式来提交信息吗?
答:首先我对casperjs和节点了解都不那么深入,我理解的是首先casperjs不是一个节点模块,它是跑在操作系统中的,我尚且没有发现怎么在casperjs中建立与节点服务的通信,如果有方法一定要告诉我,因为我真的不太了解卡斯珀!其次由于无法建立通信,我只能退而求其次,通过鬼马小精灵快速打开一个我写好的表单页面并且填写好图片信息传回服务器,这么做是可以完成最初的诉求。所以就有了上面from.html那段的操作。
<>强实现细节
实现一个简易静态服务器
因为涉及到index . html与形式。html页面的返回,故需要实现一个超级简易的静态服务器。代码如下:
const MIME_TYPE =, {
,“css":“文本/css"
,“gif":“图像/gif"
,“html":“文本/html"
,“ico":“图像/x-icon"
,“jpeg":“图像/jpeg"
,“jpg":“图像/jpg"
,“js":“文本/javascript"
,“json":“应用程序/json"
,“pdf":“应用程序/pdf"
,“png":“图像/png"
,“svg":“图像/svg + xml"
,“swf":“应用程序/x-shockwave-flash"
,“tiff":“图像/tiff"
,“txt":“文本/plain"
,“wav":“音频/x-wav"
,“wma":“音频/x-ms-wma"
,“wmv":“视频/x-ms-wmv"
,“xml":“文本/xml"
}
function sendFile (filePath, res), {
,fs.open (filePath, & # 39; r + & # 39;,,函数(err){,//根据路径打开文件
如果才能(err) {
,,send404 (res)
}{其他才能
,,let ext =, path.extname (filePath)
,,ext =, ext ?, ext.slice(1),:, & # 39;未知# 39;
,,let contentType =, MIME_TYPE (ext), | |,“文本/plain",//匹配文件类型
,,fs.readFile (filePath、功能(呃,数据){
,,,如果(err) {
,,,,send500 (res)
还有,,,}{
,,,,res.writeHead(200年,{& # 39;内容类型# 39;:contentType})
,,,,res.end(数据)
,,,}
,,})
,,}
,})
} 解析表单并将图片存储到图像文件夹
const multiparty =,要求(& # 39;多党# 39;),//解析表单
let form =, new multiparty.Form ()
,form.parse(点播,function (呃,,,,文件),{
let 才能;filename =,文件[& # 39;文件# 39;][0].originalFilename,
,,targetPath =, __dirname +, & # 39;/图片/& # 39;,+,文件名,
如果才能(文件名){
,,fs.createReadStream(文件[& # 39;文件# 39;][0].path) .pipe (fs.createWriteStream(定位路径))
,,…
,,},
之前,})
