获取图像顶部条带的 rgba 值

Question

我正在处理一个包含两种类型图像的网站。

图像类型 1 在顶部有所有白色 space。

图像类型 2 在顶部有 至少一个非白色像素 space。

我想知道是否有一种方法可以检测图像是否有白色 space 沿着图像的第一个完整宽度（高度为 1 像素）的任何地方。

图像类型 1

图像类型 2

Answer 1

你想在这里做什么？这似乎不是执行此操作的理想方法。

如果您有权访问代码，您可以只给顶部带有白色的图像添加 class="white-top" 或类似的内容，然后进行相应的编辑。

希望对您有所帮助！

Answer 2

我会考虑使用 ImageMagick 来比较某些坐标处的像素 RGB 值，这可能是使这项工作适合您的一种方式。

Answer 3

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

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

现在我们 select 要处理的第一个图像并获取其 canvas 数据

    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...}

要从 canvas 的 select 部分获取 rgba 数据，请设置您希望开始的 x ,y 坐标，以 px 为单位的宽度（对于我们的示例，将为 640）和高度（1 像素，根据您的规格）。例如：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 的变量。我将留下实现的其余部分符合你的逻辑，但我希望这是一个好的起点。

获取图像顶部条带的 rgba 值

Get rgba values of top sliver of image

html

javascript

css

image

image-processing