基于casperjs、resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)

Jingbin_ 發(fā)布于2019-08-21 18:44 / 1324人閱讀

摘要：寫(xiě)在最前本次分享一個(gè)提供設(shè)計(jì)稿與前端頁(yè)面進(jìn)行像素對(duì)比的服務(wù)，旨在為測(cè)試或者前端人員自己完成一個(gè)輔助性測(cè)試。圖片像素對(duì)比工具?；緦?shí)現(xiàn)思路可以理解為通過(guò)將圖片轉(zhuǎn)為后，獲取其圖像像素點(diǎn)，之后對(duì)每個(gè)像素點(diǎn)進(jìn)行一次比對(duì)。

寫(xiě)在最前

本次分享一個(gè)提供設(shè)計(jì)稿與前端頁(yè)面進(jìn)行像素對(duì)比的node服務(wù)，旨在為測(cè)試或者前端人員自己完成一個(gè)輔助性測(cè)試。相信我，在像素級(jí)別的對(duì)比下，網(wǎng)頁(yè)對(duì)設(shè)計(jì)稿的還原程度一下子就會(huì)凸顯出來(lái)。
歡迎關(guān)注我的博客，不定期更新中——

效果預(yù)覽

前置知識(shí)

本次用到了以下兩個(gè)庫(kù)作為輔助工具：

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

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

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

整體思路

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

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

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

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

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

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

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

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

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

實(shí)現(xiàn)細(xì)節(jié) 實(shí)現(xiàn)一個(gè)簡(jiǎn)易靜態(tài)服務(wù)器

因?yàn)樯婕暗絠ndex.html與form.html頁(yè)面的返回，故需要實(shí)現(xiàn)一個(gè)超級(jí)簡(jiǎ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ù)路徑打開(kāi)文件
        if(err){
            send404(res)
        }else{
            let ext = path.extname(filePath)
            ext = ext ? ext.slice(1) : "unknown"
            let contentType = MIME_TYPE[ext] || "text/plain" //匹配文件類(lèi)型
            fs.readFile(filePath,function(err,data){
                if(err){
                    send500(res)
                }else{
                 res.writeHead(200,{"content-type":contentType})
                    res.end(data)
                }
            })
        }
    })
}

解析表單并將圖片存儲(chǔ)到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))
            ...
        } 
    })

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

運(yùn)行casperjs

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

通過(guò)spawn可以創(chuàng)建子進(jìn)程來(lái)啟動(dòng)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("正在截圖請(qǐng)稍后")
        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()

代碼還是比較簡(jiǎn)單的，主要過(guò)程就是打開(kāi)一個(gè)頁(yè)面，然后在then中傳入你的操作，最后執(zhí)行run。在這個(gè)過(guò)程里我不太知道如何與node服務(wù)通信，故選擇了再開(kāi)一個(gè)頁(yè)面。。想深入研究的可以去看casperjs的官網(wǎng)非常詳盡！

通過(guò)resemble.js進(jìn)行像素比對(duì)并返回?cái)?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] // 找回最開(kāi)始的res返回給頁(yè)面數(shù)據(jù)
        resEnd.writeHead(200, {"Content-type":"application/json"})
        resEnd.end(JSON.stringify(imgObj))
    }
let result = resemble(diff).compareTo(point).ignoreColors().onComplete(complete)

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

能看到版本號(hào)即安裝成功

安裝casperjs

brew update && brew install casperjs

安裝resemble.js

cnpm i resemblejs //已寫(xiě)進(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

打開(kāi)http://localhost:3033/index.html

參考文獻(xiàn)

PhantomJS 安裝

casperjs 文檔

resemble.js 文檔

最后

慣例po作者的博客，不定時(shí)更新中——
有問(wèn)題歡迎在issues下交流。

云服務(wù)器 GPU云服務(wù)器一個(gè)云服務(wù)器價(jià)格對(duì)比云服務(wù)器一個(gè)月價(jià)格對(duì)比基于webrtc實(shí)現(xiàn)對(duì)講 webrtc基于Java實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90757.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Jingbin_

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

這5款Python Web APP開(kāi)發(fā)工具，最中意哪一款？

閱讀 2531·2021-11-12 10:34
H5多列布局

閱讀 1527·2019-08-29 16:15
前端面試中經(jīng)常問(wèn)到的問(wèn)題：如何提高網(wǎng)站性能總結(jié)

閱讀 2746·2019-08-29 15:17
Chrome 小恐龍游戲源碼探究六 -- 記錄游戲分?jǐn)?shù)

閱讀 1451·2019-08-23 17:09
請(qǐng)求數(shù)據(jù)

閱讀 439·2019-08-23 11:37
Javascript 運(yùn)行機(jī)制詳解，Event Loop

閱讀 2512·2019-08-23 10:39
JavaScript工作原理（一）：引擎，運(yùn)行時(shí)，調(diào)用堆棧

閱讀 549·2019-08-22 16:43
es String 內(nèi)部實(shí)現(xiàn)邏輯標(biāo)準(zhǔn)

閱讀 3173·2019-08-22 14:53

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

基于casperjs、resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)

相關(guān)文章

記一次“失利后”經(jīng)過(guò)半年準(zhǔn)備通過(guò)阿里社招的經(jīng)歷與感悟

1.前端自動(dòng)化測(cè)試之視覺(jué)測(cè)試

發(fā)表評(píng)論

0條評(píng)論

Jingbin_

男|高級(jí)講師

TA的文章

這5款Python Web APP開(kāi)發(fā)工具，最中意哪一款？

H5多列布局

前端面試中經(jīng)常問(wèn)到的問(wèn)題：如何提高網(wǎng)站性能總結(jié)

Chrome 小恐龍游戲源碼探究六 -- 記錄游戲分?jǐn)?shù)

請(qǐng)求數(shù)據(jù)

Javascript 運(yùn)行機(jī)制詳解，Event Loop

JavaScript工作原理（一）：引擎，運(yùn)行時(shí)，調(diào)用堆棧

es String 內(nèi)部實(shí)現(xiàn)邏輯標(biāo)準(zhǔn)

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

基于casperjs、resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

基于casperjs、resemble.js實(shí)現(xiàn)一個(gè)像素對(duì)比服務(wù)