V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
3dwelcome
V2EX  ›  问与答

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

  •  
  •   3dwelcome · 2022-02-08 12:44:58 +08:00 · 2148 次点击
    这是一个创建于 1017 天前的主题,其中的信息可能已经有所发展或是发生改变。
    以前我用 canvas 的 getImageData(),可是我发现,一些安全浏览器会强制加入随机数,导致每次取出来都是不同结果!

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

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

    so, 不用 canvas 的情况下,还能获取到图片的像素值吗?
    16 条回复    2022-02-08 23:13:19 +08:00
    ab
        1
    ab  
       2022-02-08 12:49:13 +08:00
    同需求
    duke807
        2
    duke807  
       2022-02-08 12:53:29 +08:00 via Android
    可以把 png 、jpg 等各種圖片轉換為類似 bmp 的 raw 格式(區別是沒有 bmp 的 header ),使用 linux 的 convert 命令

    convert 命令是屬於 ImageMagick 這個軟件,github 有把這個軟件打包為 wasm 的 demo
    IsaacYoung
        3
    IsaacYoung  
       2022-02-08 12:55:59 +08:00 via iPhone
    试试 gl? 图片作为纹理渲染 然后 glReadPixels
    IsaacYoung
        4
    IsaacYoung  
       2022-02-08 12:58:31 +08:00 via iPhone
    或者 根据文件头文件和数据的格式定义 以二进制读取
    3dwelcome
        5
    3dwelcome  
    OP
       2022-02-08 12:58:57 +08:00
    @duke807 总觉取个图片像素,上 wasm 有那么点 overkill 的感觉。

    @IsaacYoung 好主意,估计没办法也只能用 glReadPixels 了。
    otakustay
        6
    otakustay  
       2022-02-08 13:21:19 +08:00
    只要图片的话,用<img>挂一个,等 onload 了以后取 naturalWidth 和 naturalHeight 就行,我不记得会不会受 devicePixelRatio 影响了,可以实验一下
    maplerecall
        7
    maplerecall  
       2022-02-08 13:26:34 +08:00 via Android
    插一个看不见的 absolute 的 img 标签,然后 getBoundingClientRect ,兼容性非常好。
    liyang5945
        8
    liyang5945  
       2022-02-08 13:42:39 +08:00
    @maplerecall #7 楼主说的像素值不是图片的宽高,是图片每一像素的颜色值
    tcp
        9
    tcp  
       2022-02-08 13:52:03 +08:00
    提供一个思路,利用 p5js 加载图像,p5.Image.get()可以获取任意区域的像素值。
    Buges
        10
    Buges  
       2022-02-08 13:57:33 +08:00 via Android
    因为 canvas 可以自由绘图啊,你说说除了随机化数据以外还有什么办法对抗指纹?
    wu67
        11
    wu67  
       2022-02-08 14:19:55 +08:00
    根据图片地址, 生成一个 html 标签, 然后把这个 img 元素插入到 dom, 注意 定位 fixed 放到屏幕可视区域外, 然后获取这个 dom 的信息就能拿到宽高了.
    hazardous
        12
    hazardous  
       2022-02-08 15:21:12 +08:00
    用户应该用的是 Canvas Fingerprint Defender 这个插件吧,这个其实是给像素进行了肉眼难以察觉的修改,所以如果要求没那么严格的话取出来的值虽然每次不完全一样但是也不是不能用。
    lumotian
        13
    lumotian  
       2022-02-08 15:36:15 +08:00
    多取几次 然后取平均数 这个可行吗
    rioshikelong121
        14
    rioshikelong121  
       2022-02-08 16:19:15 +08:00
    @liyang5945 所以楼主能不能说下到底你要取什么
    3dwelcome
        15
    3dwelcome  
    OP
       2022-02-08 16:32:05 +08:00
    明确一下,canvas 在 chrome 里是完全没问题的。

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

    -----------

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

    @lumotian 我都不敢信,但实测平均值还真可以,随机数也就是一定范围下移动。完全精确不行,大致还是可行的。
    ysc3839
        16
    ysc3839  
       2022-02-08 23:13:19 +08:00 via Android
    直接用 js 代码解析图片数据不就行了?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1213 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:03 · PVG 02:03 · LAX 10:03 · JFK 13:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.