javascript - 将图像读取为线条的算法(然后得到它们的结果)？

Question

是否有一种算法可以从图像的像素中获取图像的线条描边(忽略曲线、圆等，一切都将被视为线条，但仍然类似于矢量)？然后得到它们的结果，比如 Array？

这就是阅读的基本方式

这样，每一行像素都将被读取为 1 条水平线，我也想处理垂直线；但是如果有一个圆形的粗线需要超过 1 行

这将被视为一行。它的线宽与其所具有的像素高度相同。

例如，假设我们有一个包含(红色、绿色、蓝色、alpha)格式 (JavaScript) 像素行的数组:

/* formatted ImageData().data */
[
    new Uint8Array([
        /* first pixel */
        255, 0, 0, 255,
        /* second pixel */
        255, 0, 0, 255
    ]),

    new Uint8Array([
        /* first pixel */
        0, 0, 0, 0,
        /* second pixel */
        0, 0, 0, 0
    ])
]

这将是一个 2x2 像素的图像数据，带有一条直线水平红线。所以，从这个数组中，我想得到一个包含行数据的数组，比如:

[
    // x, y: start point
    // tx, ty: end point
    // w: line width

    // the straight horizontal red line of 1 pixel
    { x: 0, y: 0, tx: 2, ty: 0, w: 1, rgba: [255, 0, 0, 255] }
]

注意:我想处理抗锯齿。

这是我读取上述格式像素的函数:

var getImagePixels = function(img){
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0);

    var imgData = ctx.getImageData(0, 0, img.width, img.height).data;
    var nImgData = [];
    var offWidth = img.width * 4;

    var dataRow = (nImgData[0] = new Uint8Array(offWidth));

    for (var b = 0, i = 0; b++ < img.height;) {
        nImgData[b] = new Uint8Array(offWidth);

        for (var arrI = 0, len = i + offWidth; i < len; i += 4, arrI += 4) {
            nImgData[b][arrI] = imgData[i];
            nImgData[b][arrI + 1] = imgData[i + 1];
            nImgData[b][arrI + 2] = imgData[i + 2];
            nImgData[b][arrI + 3] = imgData[i + 3];
        }
    }

    return nImgData;
};

Answer 1

您可以使用 Hough transform 查找所有行.它只会找到直线，不会找到曲线或圆。您可能需要在查找线条之前运行边缘检测。这是例子:

Here你可以找到 opencv 的实现示例。