從 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 對“半識別瀏覽器功能的 output”應用了一些小的、可重復的隨機化，以擊敗指紋識別工作。 他們稱這為流言蜚語。

可觀察的行為（來自該鏈接）：

• 每次嘗試在同一個 session 中進行指紋識別時，站點都會獲得完全相同的值
• 不同的站點會得到不同的值
• 同一站點將在下一個 session 上獲得不同的值

Farbling 應用於這些 canvas 功能：

• 獲取圖像數據
• 測量文本
• isPointInPath
• isPointInStroke
• toDataURL
• 到Blob