同一设备的不同浏览器读取html5本地,不同设备基于Html5 Canvas的浏览器渲染结果比较...

摘 要：Html5 Canvas画布渲染属性被广泛的应用于客户端指纹跟踪系统中，与其他设备属性不同的是，Html5 Canvas的渲染结果是用户无法改变，且非常稳定的。但是H5 Canvas的唯一性如何呢？对于海量数据来说，H5 Canvas的熵表现会如何呢？文中将从H5 Canvas渲染原理，技术实现方式，数据采集结果分析角度，解答这两个问题。

关键词：H5 Canvas；设备指纹；熵

近年来，进入移动数字时代后，各种各样的移动设备充斥着我们每天的生活。对于服务提供商来说，客户端的设备也从之前单纯的个人PC，增加了各种各样的手机、平板、智能手表、智能电视等其他终端。追踪用户，记录用户的使用习惯，对用户行为分析已不是什么秘密。Html5 Canvas画布渲染属性被广泛的应用于客户端指纹跟踪系统中，与其他设备属性不同的是，Html5 Canvas的渲染结果是用户无法改变，且非常稳定的。那么，在不同平台下，Html5 Canvas在各种浏览器下的唯一性表现如何呢？Html5 Canvas是否具有很强的设备区分度？

一、Html5 Canvas原理简介

Html5 Canvas画布渲染原理是利用Html5 Canvas的绘画功能，在网页上绘制一张图片，因为Canvas是一种2D的渲染结果，在图片的渲染过程中，会涉及操作系统对页面像素的处理，GPU对于显示效果的渲染，以及不同的浏览器对于字体等的渲染叠加。所以，Canvas渲染不再是单纯的Html5的结果，而是操作系统、GPU、浏览器相互作用叠加的结果。也因此，不同的设备，在不同的操作系统GPU、浏览器下，同一段文字，一张图片展现出来的效果是存在差异的。而且，Html5 Canvas可以非常方便的把一张图片转换成64位进制，对其取哈希值后，可以非常方便的比较。

二、Html5 Canvas的技术可行性

Canvas是Html5的一个属性，canvas在高级浏览器中被广泛的支持。如Chrome，firefox，IE9以上等浏览器都支持。

Canvas的优点：Canvas是H5的画布元素，即一个DOM元素。通过脚本控制逻辑给画布上增加文字与图像，而浏览器只需要绘制一次形成一幅图。

只用一个Canvas DOM元素，降低DOM数量与渲染的复杂度，可以将原来CPU密集型变成GPU操作。绝大多数针对Canvas是用硬件GPU加速渲染 ；

GPU的ALU(计算单元)比CPU要多很多，而控制运算(逻辑)则可以用JavaScript在CPU里做，甚至还可以用WebWorker多线程处理CPU密集型的操作，从而达到充分利用硬件资源的能力；

Canvas画布无论是JavaScript&H5，还是Native都有类似的API。

基于Canvas的特性，一容易获取，高级浏览器都支持，二，用GPU渲染，因为不同设备的GPU不同，渲染的结果也不同，再加上浏览器，操作系统的差异，最终Canvas图片的结果有很大的不同。而且这种渲染结果具有非常高的稳定性，在硬件软件条件不变情况下同一台设备，同样文字在同一个浏览器中多次渲染是一样的。

三、Html5 Canvas在不同浏览器中的表现

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

JavaScript代码片段如下：

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)；

var dataURL = canvas.toDataURL()；

document.getElementById("drawing_base64").innerHTML=dataURL；

这段代码在不同浏览器中会显示出不同的效果，而且其Hash值也会不一样。如下结果：

在Firefox浏览器中显示如下：

在IE 8 浏览器中效果：

四、海量数据下Html5 Canvas的唯一性

在相同操作系统，相同浏览器，同一品牌下的canvas属性表现出很强的一致性。

在iOS系统中：

在iOS中，通一段文字在不同产品下，如iPod touch、iPad、iPhone中表现出高度的一致性，并且不同iOS版本下，依然体现出惊人一致的渲染结果。见表3

而相比于iOS产品结构比较简单，Android产品则是遍地开花，那么在各种各样品牌下，Canvas的渲染结果如何呢？

在Android系统中：

如表4所示，同一段文字，在不同品牌的Android手机，相同类型浏览器，渲染出来的Canvas Hash值是一样的，并且跟操作系统的版本号、浏览器版本、屏幕的尺寸大小，并没有绝对的关系。Canvas属性，在Android系统中，渲染结果的唯一性也是不高。

在PC Web中：

在PC中，不同浏览器，Canvas能表现出一定差异性，这种差异性在相同操作系统的邻近版本中，表现不明显，且跟屏幕尺寸关系不大。见表5。

五、海量数据下Html5 Canvas熵

通过计算，在10万数据集下，一个字符串类型的Html5 Text Canvas 熵为5.37。

六、结论

如果从单一的Html5 Canvas字体渲染结果来看，Html5 Canvas在不同操作系统中的区分度明显，跟浏览器类型有一定关系，但跟屏幕尺寸大小关系不大。单一的Html5 Canvas字体渲染的熵为5.37，并不是很好，不能很好的区分不同的设备。在实际应用中，为了增加Canvas的辨识度，可以考虑添加不同字体类型、多种图形交叉渲染、增加画面颜色、曲线的复杂度等，来提升Html5 Canvas的熵。