问图像上条的rgba值

EN

因为您使用的是画布元素，所以可以利用.getImageData()函数从画布元素中获取RGBA数据。我不知道您是打算在服务器端还是在JS中实现这个逻辑，所以我只需要获取一个示例canvas对象来给我的示例提供一些上下文。

    canvas = document.getElementsByTagName('canvas');
    // returns array of DOM objects [<canvas width=640 height=480>]

现在我们选择使用它的第一个图像并获取它的画布数据。

    context = canvas[0].getContext('2d');
    // returns an ImageData object that looks like this:
    // CanvasRenderingContext2D {textBaseline: "alphabetic", textAlign: "start", font: "10px sans-serif", lineDashOffset: 0, miterLimit: 10...}

要从画布的选定部分获取rgba数据，请设置希望从哪里开始的x，y坐标、px中的宽度(在我们的示例中为640)和高度(1 px，根据您的规格)。例：context.getImageData(x, y, w, h).data

    rgba = context.getImageData(1, 1, 640, 1).data
    // returns ImageData object from Uint8ClampedArray[2560]

变量rgba存储图像顶部第一行中每个像素的R、G、B、A值。也就是说，red = rgba[0]，green = rgba[1]，blue = rgba[2]，alpha = rgba[3] 用于第一个像素。然后，rgba[4]是第二个像素的红色值，并且模式重复。

本质上，只要R、G、B、A值不是255，您就需要一个存储nonWhite = false并将其更改为true的变量。我将把实现逻辑的其余部分留给您，但我希望这是一个良好的起点。

我会考虑使用ImageMagick来比较某些坐标下的像素RBG值，这可能是一种为您工作的方法。

你想在这里做什么？这似乎不是一种理想的方法。

如果您可以访问代码，您只需将顶部为白色的图像赋予class=“白顶”或类似的内容，然后相应地进行编辑。

希望这能有所帮助！