不同設(shè)備基于Html5 Canvas的瀏覽器渲染結(jié)果比較

摘 要：Html5 Canvas畫布渲染屬性被廣泛的應(yīng)用于客戶端指紋跟蹤系統(tǒng)中，與其他設(shè)備屬性不同的是，Html5 Canvas的渲染結(jié)果是用戶無(wú)法改變，且非常穩(wěn)定的。但是H5 Canvas的唯一性如何呢？對(duì)于海量數(shù)據(jù)來(lái)說(shuō)，H5 Canvas的熵表現(xiàn)會(huì)如何呢？文中將從H5 Canvas渲染原理，技術(shù)實(shí)現(xiàn)方式，數(shù)據(jù)采集結(jié)果分析角度，解答這兩個(gè)問(wèn)題。

關(guān)鍵詞：H5 Canvas；設(shè)備指紋；熵

近年來(lái)，進(jìn)入移動(dòng)數(shù)字時(shí)代后，各種各樣的移動(dòng)設(shè)備充斥著我們每天的生活。對(duì)于服務(wù)提供商來(lái)說(shuō)，客戶端的設(shè)備也從之前單純的個(gè)人PC，增加了各種各樣的手機(jī)、平板、智能手表、智能電視等其他終端。追蹤用戶，記錄用戶的使用習(xí)慣，對(duì)用戶行為分析已不是什么秘密。Html5 Canvas畫布渲染屬性被廣泛的應(yīng)用于客戶端指紋跟蹤系統(tǒng)中，與其他設(shè)備屬性不同的是，Html5 Canvas的渲染結(jié)果是用戶無(wú)法改變，且非常穩(wěn)定的。那么，在不同平臺(tái)下，Html5 Canvas在各種瀏覽器下的唯一性表現(xiàn)如何呢？Html5 Canvas是否具有很強(qiáng)的設(shè)備區(qū)分度？

一、Html5 Canvas原理簡(jiǎn)介

Html5 Canvas畫布渲染原理是利用Html5 Canvas的繪畫功能，在網(wǎng)頁(yè)上繪制一張圖片，因?yàn)镃anvas是一種2D的渲染結(jié)果，在圖片的渲染過(guò)程中，會(huì)涉及操作系統(tǒng)對(duì)頁(yè)面像素的處理，GPU對(duì)于顯示效果的渲染，以及不同的瀏覽器對(duì)于字體等的渲染疊加。所以，Canvas渲染不再是單純的Html5的結(jié)果，而是操作系統(tǒng)、GPU、瀏覽器相互作用疊加的結(jié)果。也因此，不同的設(shè)備，在不同的操作系統(tǒng)GPU、瀏覽器下，同一段文字，一張圖片展現(xiàn)出來(lái)的效果是存在差異的。而且，Html5 Canvas可以非常方便的把一張圖片轉(zhuǎn)換成64位進(jìn)制，對(duì)其取哈希值后，可以非常方便的比較。

二、Html5 Canvas的技術(shù)可行性

Canvas是Html5的一個(gè)屬性，canvas在高級(jí)瀏覽器中被廣泛的支持。如Chrome，firefox，IE9以上等瀏覽器都支持。

Canvas的優(yōu)點(diǎn)：Canvas是H5的畫布元素，即一個(gè)DOM元素。通過(guò)腳本控制邏輯給畫布上增加文字與圖像，而瀏覽器只需要繪制一次形成一幅圖。

只用一個(gè)Canvas DOM元素，降低DOM數(shù)量與渲染的復(fù)雜度，可以將原來(lái)CPU密集型變成GPU操作。絕大多數(shù)針對(duì)Canvas是用硬件GPU加速渲染 ；

GPU的ALU（計(jì)算單元）比CPU要多很多，而控制運(yùn)算（邏輯）則可以用JavaScript在CPU里做，甚至還可以用WebWorker多線程處理CPU密集型的操作，從而達(dá)到充分利用硬件資源的能力；

Canvas畫布無(wú)論是JavaScriptH5，還是Native都有類似的API。

基于Canvas的特性，一容易獲取，高級(jí)瀏覽器都支持，二，用GPU渲染，因?yàn)椴煌O(shè)備的GPU不同，渲染的結(jié)果也不同，再加上瀏覽器，操作系統(tǒng)的差異，最終Canvas圖片的結(jié)果有很大的不同。而且這種渲染結(jié)果具有非常高的穩(wěn)定性，在硬件軟件條件不變情況下同一臺(tái)設(shè)備，同樣文字在同一個(gè)瀏覽器中多次渲染是一樣的。

三、Html5 Canvas在不同瀏覽器中的表現(xiàn)

在Html5 Canvas中顯示： Welcome to Jiaotong University！ I'm font： 18pt Arial！ 字體Arial，18pt，黑色。

JavaScript代碼片段如下：

<！--Text_Arail-->

var canvas=document.getElementById（\"drawing\"）；

var context=canvas.getContext（\"2d\"）；

context.font=\"18pt Arial\"；

context.textBaseline =\"top\"；

context.fillText（\"Welcome to Jiaotong University！ I'm font： 18pt Arial\"，2，2）；

<！--Get Canvas Image base64 data-->

var dataURL = canvas.toDataURL（）；

document.getElementById（\"drawing_base64\"）.innerHTML=dataURL；

這段代碼在不同瀏覽器中會(huì)顯示出不同的效果，而且其Hash值也會(huì)不一樣。如下結(jié)果：

在Firefox瀏覽器中顯示如下：

在IE 8 瀏覽器中效果：

四、海量數(shù)據(jù)下Html5 Canvas的唯一性

在相同操作系統(tǒng)，相同瀏覽器，同一品牌下的canvas屬性表現(xiàn)出很強(qiáng)的一致性。

在iOS系統(tǒng)中：

在iOS中，通一段文字在不同產(chǎn)品下，如iPod touch、iPad、iPhone中表現(xiàn)出高度的一致性，并且不同iOS版本下，依然體現(xiàn)出驚人一致的渲染結(jié)果。見(jiàn)表3

而相比于iOS產(chǎn)品結(jié)構(gòu)比較簡(jiǎn)單，Android產(chǎn)品則是遍地開(kāi)花，那么在各種各樣品牌下，Canvas的渲染結(jié)果如何呢？

在Android系統(tǒng)中：

如表4所示，同一段文字，在不同品牌的Android手機(jī)，相同類型瀏覽器，渲染出來(lái)的Canvas Hash值是一樣的，并且跟操作系統(tǒng)的版本號(hào)、瀏覽器版本、屏幕的尺寸大小，并沒(méi)有絕對(duì)的關(guān)系。Canvas屬性，在Android系統(tǒng)中，渲染結(jié)果的唯一性也是不高。

在PC Web中：

在PC中，不同瀏覽器，Canvas能表現(xiàn)出一定差異性，這種差異性在相同操作系統(tǒng)的鄰近版本中，表現(xiàn)不明顯，且跟屏幕尺寸關(guān)系不大。見(jiàn)表5。

五、海量數(shù)據(jù)下Html5 Canvas熵

通過(guò)計(jì)算，在10萬(wàn)數(shù)據(jù)集下，一個(gè)字符串類型的Html5 Text Canvas 熵為5.37。

六、結(jié)論

如果從單一的Html5 Canvas字體渲染結(jié)果來(lái)看，Html5 Canvas在不同操作系統(tǒng)中的區(qū)分度明顯，跟瀏覽器類型有一定關(guān)系，但跟屏幕尺寸大小關(guān)系不大。單一的Html5 Canvas字體渲染的熵為5.37，并不是很好，不能很好的區(qū)分不同的設(shè)備。在實(shí)際應(yīng)用中，為了增加Canvas的辨識(shí)度，可以考慮添加不同字體類型、多種圖形交叉渲染、增加畫面顏色、曲線的復(fù)雜度等，來(lái)提升Html5 Canvas的熵。