如何基于casperjs和resemble.js實(shí)現(xiàn)一個像素對比服務(wù)

這篇文章將為大家詳細(xì)講解有關(guān)如何基于casperjs和resemble.js實(shí)現(xiàn)一個像素對比服務(wù)，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)長期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為離石企業(yè)提供專業(yè)的網(wǎng)站制作、成都網(wǎng)站建設(shè)，離石網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。

效果預(yù)覽

前置知識

本次用到了以下兩個庫作為輔助工具：

• casperjs：基于PhantomJS的編寫。其內(nèi)部提供了一個無界面瀏覽器，簡單來說用它你可以以代碼的形式來完成模擬人來操作瀏覽器的操作，其中涉及鼠標(biāo)各種事件，等等非常多的功能，本次主要使用其附帶的截圖功能。

• resemble.js:圖片像素對比工具。調(diào)用方法簡單理解為，傳入兩張圖，返回一張合成圖并附帶對比參數(shù)如差別度等等。基本實(shí)現(xiàn)思路可以理解為通過將圖片轉(zhuǎn)為canvas后，獲取其圖像像素點(diǎn)，之后對每個像素點(diǎn)進(jìn)行一次比對。

所以整個服務(wù)我們應(yīng)該已經(jīng)有了大題的思路即通過casperjs來進(jìn)入某個網(wǎng)站截取某個頁面，再將其與設(shè)計圖進(jìn)行比對得出結(jié)果。

整體思路

通過上圖我們應(yīng)該能整理出一個大概的流程：

• 從前端頁面接收設(shè)計稿圖片及需要截取的網(wǎng)站地址與節(jié)點(diǎn)信息

• 將設(shè)計稿保存到images文件夾

• 開啟子進(jìn)程，啟動casperjs，完成對目標(biāo)網(wǎng)站的截取

• 截取后請求form.html將圖片地址信息填入并重新傳回服務(wù)器

• 服務(wù)端獲取圖片信息通過resemblejs將截取圖與設(shè)計稿進(jìn)行比對

• 結(jié)果傳回前端頁面

這其中有一個問題可能會有人注意到就是：為什么在casperjs中對目標(biāo)網(wǎng)站截圖了不能直接把信息傳回服務(wù)器中，而是選擇了再去打開一個表單頁面通過表單的形式來提交信息？

答：首先我對casperjs和node了解都不那么深入，我理解的是首先casperjs不是一個node模塊，它是跑在操作系統(tǒng)中的，我尚且沒有發(fā)現(xiàn)怎么在casperjs中建立與node服務(wù)的通信，如果有方法一定要告訴我，因?yàn)槲艺娴牟惶私鈉asper！其次由于無法建立通信，我只能退而求其次，通過casper快速打開一個我寫好的表單頁面并且填寫好圖片信息傳回服務(wù)器，這么做是可以完成最初的訴求。所以就有了上面from.html那段的操作。

實(shí)現(xiàn)細(xì)節(jié)

實(shí)現(xiàn)一個簡易靜態(tài)服務(wù)器

因?yàn)樯婕暗絠ndex.html與form.html頁面的返回，故需要實(shí)現(xiàn)一個超級簡易的靜態(tài)服務(wù)器。代碼如下：

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){ //根據(jù)路徑打開文件
  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))
   ...
  } 
 })

通過創(chuàng)建可讀流讀出文件內(nèi)容，再通過pipe寫入到制定路徑下即可保存上傳來的圖片。

運(yùn)行casperjs

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

通過spawn可以創(chuàng)建子進(jìn)程來啟動casperjs，同樣也可以使用exec等。

截圖并提交數(shù)據(jù)到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中傳入你的操作，最后執(zhí)行run。在這個過程里我不太知道如何與node服務(wù)通信，故選擇了再開一個頁面。。想深入研究的可以去看casperjs的官網(wǎng)非常詳盡！

通過resemble.js進(jìn)行像素比對并返回數(shù)據(jù)

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返回給頁面數(shù)據(jù)
  resEnd.writeHead(200, {'Content-type':'application/json'})
  resEnd.end(JSON.stringify(imgObj))
 }
let result = resemble(diff).compareTo(point).ignoreColors().onComplete(complete)

這其中涉及到了一個點(diǎn)，即我現(xiàn)在所得到的結(jié)果要返回給最初的請求里，而從一開始的請求到現(xiàn)在我已經(jīng)中轉(zhuǎn)了多次，導(dǎo)致我現(xiàn)在找不到我最初的返回體res了。想了很久只能暫時采用了設(shè)定全局對象，在接收最初的請求后將請求者的ip和時間戳設(shè)定為唯一id存為該對象的key，value為當(dāng)前的res。同時整個中轉(zhuǎn)流程中時刻傳遞id，最后通過調(diào)用resObj[id]來得到一開始的返回體，返回數(shù)據(jù)。這個方法我不認(rèn)為是最優(yōu)解，但是鑒于我現(xiàn)在想不出來好方法為了跑通整個服務(wù)不得已。。如果有新的思路請務(wù)必告知！！

部署

安裝PhantomJS（osx）

官網(wǎng)下載： phantomjs-2.1.1-macosx.zip

解壓路徑：/User/xxx/phantomjs-2.1.1-macosx

添加環(huán)境變量：~/.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 //已寫進(jìn)packjson可不用安裝
brew install pkg-config cairo libpng jpeg giflib
cnpm i canvas //node內(nèi)運(yùn)行canvas

node服務(wù)

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

關(guān)于“如何基于casperjs和resemble.js實(shí)現(xiàn)一個像素對比服務(wù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

標(biāo)題名稱：如何基于casperjs和resemble.js實(shí)現(xiàn)一個像素對比服務(wù)
網(wǎng)頁鏈接：http://www.muchs.cn/article38/jsoosp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、、Google、標(biāo)簽優(yōu)化、營銷型網(wǎng)站建設(shè)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)