全国咨询热线:18720358503

常州小菜园微信小程序_基于casperjs和resemble.js完成

类别:行业新闻 发布时间:2021-01-08 浏览人次:

基于casperjs和resemble.js实现一个像素对比服务详解       这篇文章主要给大家介绍了关于基于casperjs和resemble.js实现一个像素对比服务的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

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

效果预览


前置知识

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

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

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

整体思路

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

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

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

<那段的操作。

实现细节

实现一个简易静态服务器
<页面的返回,故需要实现一个超级简易的静态服务器。代码如下:

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文件夹

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

const { spawn } = require('child_process')
spawn('casperjs', ['casper.js', filename, captureUrl, selector, id])
casperjs.stdout.on('data', (data) = {
}) 

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

<
const system = require('system')
const host = '/ 浏览器窗口大小
 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() {
 ', function() {
 this.fill('form#contact-form', {
 'diff': './images/casper'+ id + time +'.png',
 'point': './images/' + fileName,
 'id': id
 }, true)
casper.run()

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

通过resemble.js进行像素比对并返回数据

plete(data) {
 let imgName = 'diff'+ new Date().getTime() +'.png',
 imgUrl,
 analysisTime = data.analysisTime,
 misMatchPercentage = data.misMatchPercentage,
 resultUrl = './images/' + imgName
 fs.writeFileSync(resultUrl, data.getBuffer())
 imgObj = {
 let resEnd = resObj[id] // 找回最开始的res返回给页面数据
 resEnd.writeHead(200, {'Content-type':'application/json'})
 resEnd.end(JSON.stringify(imgObj))
let result = resemble(diff).compareTo(point).ignoreColors().plete)

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

部署

安装PhantomJS(osx)

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

解压路径:/User/xxx/phantomjs-2.1.1-macosx

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

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

terminal输入:phantomjs --version

能看到版本号即安装成功

安装casperjs

brew update brew install casperjs

安装resemble.js

cnpm i resemblejs //已写进packjson可不用安装
brew install pkg-config cairo libpng jpeg giflib
cnpm i canvas //node内运行canvas

node服务

git clone Aaaaaaaty/gui-auto-test.git
cd gui-auto-test
cnpm i
cd pxdiff
nodemon server.js
<

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

参考文献

总结

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


推荐阅读

常州小菜园微信小程序_基于casperjs和resemble.js完成

根据casperjs和resemble.js完成一个清晰度比照服务详细说明 本文关键给大伙儿详细介绍了有关根据casperjs和resemble.js完成一个清晰度比照服务的有关材料,原文中根据实例编码详细介绍...

2021-01-08
【 广州网络公司】怎么推广自己的网站【凡科】

重要词:【 广州市互联网企业】如何营销推广自身的网站 现有 954 人访问 虽然说如今修建一个网站不要求多大的成本,但是有关我们累死累活修建起來的网站,心里免不了想获得一些他...

2021-01-08
南昌微信小程序商城_Express下选用bcryptjs进行密码

Express下选用bcryptjs开展登陆密码数据加密的方式 前几日运用Express开发设计了个好项目,开发设计登陆申请注册控制模块时,选用bcryptjs开展登陆密码数据加密,小结了一下內容:...

2021-01-08
广州凡科互联网科技股份有限公司招聘推广运营

招聘人数:3职位信息一、岗位职责:1、协助推广主管负责京东、天猫等店铺的营销推广工作;2、优化店铺及商品排名,进行店铺推广,提高店铺点击率和浏览量;3、挖掘产品卖点,打...

2021-01-08
强而有力的软文推广技巧!

在推广软文营销推广的全过程中,不但仅必须品质高、方法的的推广软文,还必须强劲有力的营销推广方式。一篇好的推广软文假如沒有适合的营销推广方式,能够说对公司的宣传策划...

2021-01-08
通过360三维全景技术实现城市间数字化建设

这种年伴随着高新科技的持续发展趋势,限定360全景图技术性的因数持续降低。360全景图技术性的日渐发展趋势在全世界范畴是一种新视觉效果新技术应用,根据对实景拍摄的拍攝可以...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信