基于文字识别—实现点击图片任意位置文字即可翻译的功能

By | 2018年1月19日

基于文字识别—实现点击图片任意位置文字即可翻译的功能

文字识别功能是基于百度接口的,以前只是做了一个简单的识别,将识别出的文字显示出来,后来想能不能直接点击图片上的文字,然后将文字读取出来,用语音读出文字,或者去翻译文字,这样无疑更加方便,实用,快捷。

我的想法是,先将整个图片中的文字识别出来,然后在图片上写一个相应大小的div遮罩层,再在每行文字上形成一个遮罩层,当点击图片上的文字时,其实点击的就是图片上的div层,然后将div中所包含的数据传到后端处理,实现效果如下图

实现前,需要将数据转换,获得每行数据的left,top,height,width的属性值,然后用js获取图片大小,然后将div设置为相同大小,具体操作看代码,在形成遮罩层的代码比较麻烦

下面是使用效果,




发表评论

电子邮件地址不会被公开。 必填项已用*标注