javascript - 从浏览器/javascript/webgl 中的照片中提取纸张

Question

之前有人问过类似的问题 - 但答案涉及 OpenCV 和 Python 或 C++。我的用例要求这发生在浏览器环境中。

我试图识别照片中一张纸的 4 个角，以便将边拉直成一个矩形。

目前我的方法是：

• 使用 WebGL 的着色器中的模糊和阈值（暂时用 imagemagick 伪造，但是一个已知问题）
• 在使用 WebGL 的着色器中计算 x 和 y 差异
• 使用hull.js识别差异高于阈值的点的凸包
• ？？？
• 使用glfx.js拉直图像

在哪里 ？？？？是我被卡住的地方——从凸包到四边形包——然后让我把角落拉直。

计算差异的着色器在这里：

void main(){
    vec2 cellSize = 1.0 / resolution;
    vec2 position = ( gl_FragCoord.xy / resolution.xy );
    
    vec4 color = texture2D(image, position);

    vec2 step = 1.0 / resolution.xy;
    
    vec4 rightCol  = texture2D(image, position + vec2(step.x, 0.0));
    vec4 bottomCol = texture2D(image, position + vec2(0.0, step.y));

    float y = 0.299 * color.r + 0.587 * color.g + 0.114 * color.b;
    color = vec4(y, y, y, 1.0);
    
    y = 0.299 * rightCol.r + 0.587 * rightCol.g + 0.114 * rightCol.b;
    rightCol  = vec4(y, y, y, 1.0);

    y = 0.299 * bottomCol.r + 0.587 * bottomCol.g + 0.114 * bottomCol.b;
    bottomCol  = vec4(y, y, y, 1.0);
    
    float thrs = y < 0.5 ? 1.0 : 0.0;
    
    float maxColor = length(color.rgb);


    float r = abs(length(-rightCol  + color) / step.x);
    float g = abs(length(-bottomCol + color) / step.y);

    
    // gl_FragColor.r = r;
    // gl_FragColor.g = g;

    gl_FragColor.r = abs(dFdx(maxColor));
    gl_FragColor.g = abs(dFdy(maxColor));

    
    gl_FragColor.b = 0.0;
    gl_FragColor.a = 1.0;
}

这些是我正在尝试处理的图像和步骤的示例。

来源（为了隐私而模糊）

模糊和阈值

微分

凸包

现在我正在考虑一种蛮力的组合方法，尝试所有 4 点组，直到找到最大的矩形。

我也尝试过使用FivekoGFX 库进行 Harris 角点检测，但误报太多，无法使用。

解决“寻找四边形”问题的方法是什么？有什么比蛮力更好的吗？任何指向库或算法的指针都会有所帮助。

标签： javascriptcanvascomputer-visionglsl