前端怎么样才能获取到一个 img 图片的精确像素值？

[3dwelcome]

以前我用 canvas 的 getImageData()，可是我发现，一些安全浏览器会强制加入随机数，导致每次取出来都是不同结果！

原因是一个叫 canvas fingerprinting 的技术（ https://browserleaks.com/canvas ），这个技术是通过向 canvas 绘制文字后，来确定用户浏览器指纹。

安全浏览器为了避免每次指纹被网站后台所识别，干脆就魔改 getImageData 函数（黑人问号？？）

so, 不用 canvas 的情况下，还能获取到图片的像素值吗？

[ab]

同需求

[duke807]

可以把 png 、jpg 等各種圖片轉換為類似 bmp 的 raw 格式（區別是沒有 bmp 的 header ），使用 linux 的 convert 命令

convert 命令是屬於 ImageMagick 這個軟件，github 有把這個軟件打包為 wasm 的 demo

[IsaacYoung]

试试 gl? 图片作为纹理渲染 然后 glReadPixels

[IsaacYoung]

或者 根据文件头文件和数据的格式定义 以二进制读取

[3dwelcome]

@duke807 总觉取个图片像素，上 wasm 有那么点 overkill 的感觉。

@IsaacYoung 好主意，估计没办法也只能用 glReadPixels 了。

[otakustay]

只要图片的话，用<img>挂一个，等 onload 了以后取 naturalWidth 和 naturalHeight 就行，我不记得会不会受 devicePixelRatio 影响了，可以实验一下

[maplerecall]

插一个看不见的 absolute 的 img 标签，然后 getBoundingClientRect ，兼容性非常好。

[liyang5945]

@maplerecall #7 楼主说的像素值不是图片的宽高，是图片每一像素的颜色值

[tcp]

提供一个思路，利用 p5js 加载图像，p5.Image.get()可以获取任意区域的像素值。

[Buges]

因为 canvas 可以自由绘图啊，你说说除了随机化数据以外还有什么办法对抗指纹？

[wu67]

根据图片地址, 生成一个 html 标签, 然后把这个 img 元素插入到 dom, 注意 定位 fixed 放到屏幕可视区域外, 然后获取这个 dom 的信息就能拿到宽高了.

[hazardous]

用户应该用的是 Canvas Fingerprint Defender 这个插件吧，这个其实是给像素进行了肉眼难以察觉的修改，所以如果要求没那么严格的话取出来的值虽然每次不完全一样但是也不是不能用。

[lumotian]

多取几次 然后取平均数 这个可行吗

[rioshikelong121]

@liyang5945 所以楼主能不能说下到底你要取什么

[3dwelcome]

明确一下，canvas 在 chrome 里是完全没问题的。

这里安全浏览器，是指 brave browser,bromite browser 之类的小众浏览器。他们把抗指纹作为一个安全 feature ，并不是 bug ，所以基本上没办法修复。

-----------

@rioshikelong121 原帖子是取像素值内容，但是一般前端这行移动端适配 DPR 需求居多，图片宽高获取变换也很常见。

@lumotian 我都不敢信，但实测平均值还真可以，随机数也就是一定范围下移动。完全精确不行，大致还是可行的。

[ysc3839]

直接用 js 代码解析图片数据不就行了？