码农干货系列【4】--图像识别之矩形区域搜索

简介

定位某个图片的矩形区域是非常有用的，这个可以通过手动的选择某个区域来实现定位，图片相关的软件都提供了这个功能；也可以像本篇一个通过程序来实现智能定位。前者会有误差，效率低下；后者选区精度高，效率高。

应用场景

1.精灵编辑器或者css sprites辅助工具（当我们需要逆着TexturePacker行事的时候），如下图所示：

2.手写识别输入

因为我们不能保证用户输入的区域，所以必须定位到用户输入的区域，再去识别用户的输入的内容。

3.魔法画板程序

比如马良神笔，要对用户绘制的火柴人进行一些上下左右移动、扭曲等效果：

矩形区域识别

废话一万句，不如一张图。看下面这张图：

这就是识别的关键。任意取图像上的一点，然后通过这点开始扩张。一般情况下，该点取的是软件使用者鼠标点击的那一点。如图是移动中的四个点：

可以看到，移动后的四个点可以确定一个矩形区域。哪条边下的所有像素为透明（即0，0，0，0），则该点不移动，等待其他点移动完成。当所有边下面的像素都为透明，则得到了我们想要的区域。我们根据移动的距离可以很方便的找到四个顶点：

所以一个递归就可以帮我们实现（js Canvas版）：


var increasePixel = 1, leftIncreasePixel = 2, rightIncreasePixel = 2, upIncreasePixel = 2, downIncreasePixel = 2;
function searchTransparentRectByTargetPoint(p) {

var p1 = { x: p.x - leftIncreasePixel, y: p.y - upIncreasePixel };
var p2 = { x: p.x + rightIncreasePixel, y: p.y - upIncreasePixel };
var p3 = { x: p.x + rightIncreasePixel, y: p.y + downIncreasePixel };
var p4 = { x: p.x - leftIncreasePixel, y: p.y + downIncreasePixel };

var breakTag = true;
if (!isXLineTransparent(p1, p2)) {
            upIncreasePixel += increasePixel;
            breakTag = false;
        }
if (!isYLineTransparent(p2, p3)) {
            breakTag = false;
            rightIncreasePixel += increasePixel;
        }
if (!isXLineTransparent(p4, p3)) {
            breakTag = false;
            downIncreasePixel += increasePixel;
        }
if (!isYLineTransparent(p1, p4)) {
            breakTag = false;
            leftIncreasePixel += increasePixel;
        }

if (breakTag) {
return [p1.x, p1.y, p3.x - p1.x, p3.y - p1.y];
        } else {
return searchTransparentRectByCenterPoint(p);
        }
    }

其中isXLineTransparent和isYLineTransparent是获取该线段下面是否全透明。


function isXLineTransparent(p1, p2) {
var _y = p2.y;
for (var i = p1.x; i < p2.x + 1; i++) {
var startIndex = this.getImageDataStartIndexByPosition({ x: i, y: _y });
var totalPixel = this.imageData.data[startIndex] + this.imageData.data[startIndex + 1] + this.imageData.data[startIndex + 2] + this.imageData.data[startIndex + 3];
if (totalPixel !== 0) {
return false;
            }
        }
return true;
    }

function isYLineTransparent(p1, p2) {
var _x = p2.x;
for (var i = p1.y; i < p2.y + 1; i++) {
var startIndex = this.getImageDataStartIndexByPosition({ x: _x, y: i });
var totalPixel = this.imageData.data[startIndex] + this.imageData.data[startIndex + 1] + this.imageData.data[startIndex + 2] + this.imageData.data[startIndex + 3];
if (totalPixel !== 0) {
return false;
            }
        }
return true;
    }