从 canvas 像素数据中获取错误的 RGB 值

Question

我在 canvas 上画了 4 个矩形。每个都有不同的颜色：

Rectangle 1: rgb(38, 94, 33)
Rectangle 2: rgb(96, 231, 42)
Rectangle 3: rgb(190, 152, 213)
Rectangle 4: rgb(57, 93, 254)

现在，如果我使用 ctx.getImageData() 获取绘制这些矩形的像素的 rgb 值。 RGB值与我设置的不对应。

let imgData1 = ctx.getImageData(50, 50, 1, 1).data;
let imgData2 = ctx.getImageData(150, 50, 1, 1).data;
let imgData3 = ctx.getImageData(250, 50, 1, 1).data;
let imgData4 = ctx.getImageData(350, 50, 1, 1).data;

rgb(39, 94, 32)     --> should be rgb(38, 94, 33)
rgb(97, 231, 43)    --> should be rgb(96, 231, 42)
rgb(191, 152, 212)  --> should be rgb(190, 152, 213)
rgb(56, 92, 254)    --> should be rgb(57, 93, 254)

知道为什么吗？

更新：

显然是浏览器问题。我使用的是 Brave（版本 1.23.75 Chromium：90.0.4430.93（官方构建）(x86_64)）。似乎可以在 chrome、ff 和 safari 中找到。

let width = 400;
let height = 300;

let canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;

let ctx = canvas.getContext('2d');

let c1 = 'rgb(38, 94, 33)';
let c2 = 'rgb(96, 231, 42)';
let c3 = 'rgb(190, 152, 213)';
let c4 = 'rgb(57, 93, 254)';

ctx.beginPath();
ctx.rect(50,50,50,50);
ctx.fillStyle  = c1;
ctx.fill();

ctx.beginPath();
ctx.rect(150,50,50,50);
ctx.fillStyle  = c2;
ctx.fill();

ctx.beginPath();
ctx.rect(250,50,50,50);
ctx.fillStyle  = c3;
ctx.fill();

ctx.beginPath();
ctx.rect(350,50,50,50);
ctx.fillStyle  = c4;
ctx.fill();

let imgData1 = ctx.getImageData(50, 50, 1, 1).data;
let imgData2 = ctx.getImageData(150, 50, 1, 1).data;
let imgData3 = ctx.getImageData(250, 50, 1, 1).data;
let imgData4 = ctx.getImageData(350, 50, 1, 1).data;

console.log(`rgb(${imgData1[0]}, ${imgData1[1]}, ${imgData1[2]}) --> Should be ${c1}`);
console.log(`rgb(${imgData2[0]}, ${imgData2[1]}, ${imgData2[2]}) --> Should be ${c2}`);
console.log(`rgb(${imgData3[0]}, ${imgData3[1]}, ${imgData3[2]}) --> Should be ${c3}`);
console.log(`rgb(${imgData4[0]}, ${imgData4[1]}, ${imgData4[2]}) --> Should be ${c4}`);

<canvas id="canvas"></canvas>

Answer 1

你被 Brave 骗了

（回答由@CBroe 和@KenHerbert 提供）

Brave 将一些小的、可重复的随机化应用于“半识别浏览器功能的输出”，以挫败指纹识别工作。他们称之为 farbling.

可观察到的行为（来自link）：

站点每次尝试在同一会话中进行指纹识别时都会获得完全相同的值
不同的网站会得到不同的值
同一网站在下一次会话中将获得不同的值

Farbling 适用于这些 canvas 功能：

获取图像数据
测量文本
isPointInPath
isPointInStroke
toDataURL
toBlob

从 canvas 像素数据中获取错误的 RGB 值

Getting the wrong RGB values from canvas pixel data

html

javascript

html5-canvas

你被 Brave 骗了