Question

此代码在画布上按指定颜色绘制1 x 1点。

function test(r, g, b, a) {
    const [width, height] = [1, 1]
    const rgba = [r, g, b, a]
    console.log(rgba)
    { // fillrect
        const canvas = Object.assign(document.createElement("canvas"), { width, height })
        const ctx = canvas.getContext("2d")
        ctx.globalAlpha = 1
        ctx.fillStyle = "#" + rgba.map(e => e.toString(16).padStart(2, "0")).join("")
        ctx.fillRect(0, 0, width, height)
        console.log(ctx.getImageData(0, 0, width, height).data)
    }
    { // putimagedata
        const canvas = Object.assign(document.createElement("canvas"), { width, height })
        const ctx = canvas.getContext("2d")
        ctx.globalAlpha = 1
        const imagedata = new ImageData(width, height)
        Object.assign(imagedata.data, rgba)
        ctx.putImageData(imagedata, 0, 0)
        console.log(ctx.getImageData(0, 0, width, height).data)
    }
}

我尝试了一些颜色，结果如下：

// Try Chrome
test(100, 100, 100, 100)
// [100, 100, 100, 100]
// [99, 99, 99, 100]
// [99, 99, 99, 100]

test(10, 100, 200, 50)
// [10, 100, 200, 50]
// [5, 97, 199, 50]
// [10, 102, 199, 50]

// Try Firefox
test(100, 100, 100, 100)
// [ 100, 100, 100, 100 ]
// [ 99, 99, 99, 100 ]
// [ 102, 102, 102, 100 ]

test(10, 100, 200, 50)
// [ 10, 100, 200, 50 ]
// [ 10, 102, 198, 50 ]
// [ 10, 102, 204, 50 ]

r，g和b被改变了。而且，结果在fillRect和putImageData之间有所不同。此外，Chrome和Firefox的结果也不尽相同。

为什么呢？这是一个错误吗？

最后，我将创建一个无损的图像文件，不允许换色。还有其他选择吗？

画布无法绘制准确的颜色

0 个答案: