前端怎么样才能获取到一个 img 图片的精确像素值? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
3dwelcome
V2EX    问与答

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

  •  
  •   3dwelcome 2022-02-08 12:44:58 +08:00 2470 次点击
    这是一个创建于 1341 天前的主题,其中的信息可能已经有所发展或是发生改变。
    以前我用 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     Solana     5521 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 36ms UTC 08:49 PVG 16:49 LAX 01:49 JFK 04:49
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86