基於casperjs和resemble.js實現一個像素對比服務詳解，

基於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頁面的返回，故需要實現一個超級簡易的靜態伺服器。代碼如下：

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等。

並提交資料到form.html

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的官網非常詳盡！

通過resemble.js進行像素比對並返回資料

function complete(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().onComplete(complete)

這其中涉及到了一個點，即我現在所得到的結果要返回給最初的請求裡，而從一開始的請求到現在我已經中轉了多次，導致我現在找不到我最初的返回體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 giflibcnpm i canvas //node內運行canvas

node服務

git clone https://github.com/Aaaaaaaty/gui-auto-test.gitcd gui-auto-testcnpm icd pxdiffnodemon server.js

開啟http://localhost:3033/index.html

慣例po作者的部落格，不定時更新中——

參考文獻

• PhantomJS 安裝
• casperjs 文檔
• resemble.js 文檔

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對幫客之家的支援。