标注截图上的文字区域

大家好，我是公众号3分钟学堂的郭立员~

前言

为了能够直观看到OCR文字识别的效果，决定在截图上标注文字区域，这样就能知道ocr识别工具的好不好用。

一、基本原理

①、通常OCR识别的返回值中包括识别的文字和文字的范围，利用这两种返回值在截图进行标注

②、使用悬浮窗在屏幕上做标注

每一个识别结果使用两个悬浮窗进行标注，第一个悬浮窗做成半透明的颜色块，用来标注范围，第二个悬浮窗用来显示识别的文字内容。

二、具体效果展示

三、使用的工具

本次使用的是前几天分享的一个本地ocr工具，大家如果想要的话，可以进入我的历史文章列表，找到那篇文章。

四、代码

①、核心显示代码

Function 显示区域(x1,y1,x2,y2,str,n)
    FW.NewFWindow "浮窗名" & n, x1, y1, x2 - x1, y2 - y1
    FW.SetBackColor("浮窗名" & n, "0000FF")
    FW.Opacity("浮窗名" & n, 50)    
    FW.NewFWindow("浮窗名1_"&n, x1, y2, x2-x1+20, y2-y1+10)
    FW.AddTextView "浮窗名1_" & n, "文字" & n, str, 0, 0, x2 - x1+20, y2 - y1+10
    FW.SetTextColor "文字" & n, "0000FF"
    FW.SetTextSize "文字" & n, 10
    FW.Opacity("浮窗名1_" & n, 0)
    FW.Show("浮窗名"&n)
    FW.Show("浮窗名1_"&n)
End Function

每个识别结果使用两个悬浮窗进行显示，由于我们识别的截图可能有多个文字块，那么就需要多组悬浮窗，考虑到不确定数量，这里使用“有序命名”的方法，也就是（悬浮窗+序号），并且每组两个悬浮窗的其中一个也加上了 “1_”的后缀。

此函数有6个参数：

前四个（x1,y1,x2,y2）是文字块范围

str 是识别的文字内容

n 是序号，代表识别到第几个文字块了

②、完整代码

大家都喜欢用现成的代码，这里我结合之前那个ocr，做了个完整的代码，function内容可以不用修改，只要框选屏幕上一个要识别的文字范围即可。

Import "zm.luae"
zm.init 
ocr文字识别(35,81,667,534)
Do
    Delay 1000
Loop
 
Function ocr文字识别(x1,y1,x2,y2)
    Dim 图片路径="/sdcard/pictures/1.png"
    SnapShot 图片路径,x1,y1,x2,y2
    Dim link = "http://192.168.31.7:1224/api/ocr"
    Dim headers = {"Content-Type":"application/json"}
    Dim base64 = zm.FileReadBinaryBase64(图片路径)
    TracePrint base64
    Dim body={"base64":base64}
    Dim res = Url.httpPost({"url":link,"data":Encode.TableToJson(body),"header":headers}) 
    TracePrint res
    // 对返回值进行判断
    If Len(res) > 0 Then 
        Dim tb = encode.JsonToTable(res)
        If tb["code"] = 100 Then 
            TracePrint "识别的文字块数量：",len(tb["data"])
            For i = 1 To Len(tb["data"])
                TracePrint tb["data"][i]["text"]
                TracePrint tb["data"][i]["box"][1][1],tb["data"][i]["box"][1][2],tb["data"][i]["box"][3][1],tb["data"][i]["box"][3][2]
                显示区域(tb["data"][i]["box"][1][1]+x1,tb["data"][i]["box"][1][2]+y1,tb["data"][i]["box"][3][1]+x1,tb["data"][i]["box"][3][2]+y1,tb["data"][i]["text"],i)
            Next
        Else 
            TracePrint "识别失败"
        End If
    Else 
        TracePrint "网络有问题或者搭建不成功"
    End If
End Function


Function 显示区域(x1,y1,x2,y2,str,n)
    FW.NewFWindow "浮窗名" & n, x1, y1, x2 - x1, y2 - y1
    FW.SetBackColor("浮窗名" & n, "0000FF")
    FW.Opacity("浮窗名" & n, 50)    
    FW.NewFWindow("浮窗名1_"&n, x1, y2, x2-x1+20, y2-y1+10)
    FW.AddTextView "浮窗名1_" & n, "文字" & n, str, 0, 0, x2 - x1+20, y2 - y1+10
    FW.SetTextColor "文字" & n, "0000FF"
    FW.SetTextSize "文字" & n, 10
    FW.Opacity("浮窗名1_" & n, 0)
    FW.Show("浮窗名"&n)
    FW.Show("浮窗名1_"&n)
End Function

正文完=