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

This topic created in 1584 days ago, the information mentioned may be changed or developed.

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

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

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

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

canvas

浏览器

img

获取

16 replies • 2022-02-08 23:13:19 +08:00

Feb 8, 2022

同需求

duke807

Feb 8, 2022 via Android

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

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

IsaacYoung

Feb 8, 2022 via iPhone

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

IsaacYoung

Feb 8, 2022 via iPhone

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

3dwelcome

Feb 8, 2022

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

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

otakustay

Feb 8, 2022

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

maplerecall

Feb 8, 2022 via Android

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

liyang5945

Feb 8, 2022

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

tcp

Feb 8, 2022

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

Buges

Feb 8, 2022 via Android

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

wu67

Feb 8, 2022

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

hazardous

Feb 8, 2022

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

lumotian

Feb 8, 2022

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

rioshikelong121

Feb 8, 2022

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

3dwelcome

Feb 8, 2022

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

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

-----------

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

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

ysc3839

Feb 8, 2022 via Android

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