使用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 giflib
cnpm i canvas //node内运行canvas

node服务

git clone https://github.com/Aaaaaaaty/gui-auto-test.git
cd gui-auto-test
cnpm i
cd pxdiff
nodemon server.js

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何使用vue-cli编写vue插件

在vue-cli下使用vuex（详细教程）

Bootstrap4中定制自己的颜色和风格如何解决？

以上是使用casperjs和resemble.js如何實現像素對比（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！