获取图像顶部条纹的rgba值

Question

我正在开发一个有两种图片类型的网站。

图片类型1顶部有所有 白色 空间。

图像类型2顶部有至少一个非空白区域像素。

我想知道是否有办法检测图像是否在图像的第一个完整宽度（高度为1px）的任何地方都有空白区域。

图片类型1

图片类型2

Answer 1

由于您正在使用canvas元素，因此可以使用.getImageData()函数从canvas元素中获取RGBA数据。我不知道你是打算在服务器端还是在JS中实现这个逻辑，所以我只是抓住一个示例canvas DOM对象给我的例子一些上下文。

    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]是第二个像素的红色值，图案重复。

基本上，你需要一个存储nonWhite = false的变量，并且只要R，G，B，A值中的任何一个不是255，就会更改为true。我将把剩下的实现逻辑留给你，但我希望这是一个很好的起点。

Answer 2

我会考虑使用ImageMagick来比较某些坐标处的像素RGB值，这可能是为了让你能够正常工作。

Answer 3

你想在这做什么？看起来这似乎不是理想的做法。

如果您可以访问代码，则可以在顶部使用白色的图像=“white-top”或类似的图像，然后进行相应的编辑。

希望这有帮助！