canvas图片压缩原理-JS使用Canvas压缩图片

原创：找图网 2023-05-03 05:14:22

Canvas指纹技术原理

canvas指纹的技术原理:

canvas是一种在网页上绘制2D和动画的技术。

通过html5的canvas接口,在网页上绘制一个隐藏的画布图像。在不同操作系统、不同浏览器上,产生的图片内容不完全相同(我们肉眼是无法区分的)。在图片格式上,不同浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。在像素级别来看,操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。即使相同的绘图操作,产生的图片数据的CRC检验也不相同。

计算机程序通过计算这张图片数据的哈希值,能够识别不同硬件设备渲染结果的细微区别。通过这种方式,技术上就能够通过计算用户设备的canvas指纹来标识用户。

值得注意的是,如果用户的设备,操作系统,浏览器都一样的话,计算出来的canvas指纹是一样的。换句话说:canvas指纹不具备唯一性,要和其他的浏览器指纹相互结合利用来进一步计算出区分度更高的指纹标识。

如何检测canvas指纹?

在线检测地址:

如何隐藏自己的canvas指纹?

随着谷歌浏览器宣布为了保护用户的隐私,跨域请求不在携带cookies。浏览器指纹技术成为追踪用户的热门技术,那有没有办法隐藏我们的canvas指纹呢?

目前主要用2种方式:

1.安装浏览器插件,谷歌应用商店有随机修改canvas指纹的插件( CanvasFingerprintBlock ),其原理是,每次随机往canvas画布里面注入一个随机的噪音(人肉眼是看不到的),从而影响图片数据的CRC校验结果。

2.类似 LoginBox , multilogin 这样的指纹仿关联软件,其原理是:为每个浏览器窗口环境单独分配指纹数据,和第1种方式一样,也是往canvas画布里面注入一个随机的噪音,只是这个噪音是固定的。

canvas指纹通常和webgl等其他指纹结合利用。