https://stackoverflow.com/questions/43609429/how-to-get-text-inside-a-canvas-using-webdriver-or-protractor

https://sqa.stackexchange.com/questions/3253/how-to-automate-the-action-on-a-canvas-object-when-the-canvas-element-has-no-na

0

To work inside a canvas you can use the Kantu web automation software or Sikuli. Both solutions are based on screenshots, image comparison and OCR, and can get the text inside the canvas.

You mark the data that you want to extract ("scrape") by drawing pink frames around it. Kantu then retrieves the data by using OCR. With Sikuli, you would need to find out the coordinates first.

Or, as JeffC suggested, use your current software to take a screenshot, and then OCR it. For OCR, there is the well-known Tesseract lib or use an online service like the free ocr.space.

1

The basics are that you can't with Selenium. the CANVAS tag is like an applet in the page. It doesn't actually contain any HTML. There are a few options:

  1. If you have access to the devs, you can have them expose an API for you so that you can access text, etc. using Javascript from your Selenium script. If it's part of some library, etc. the library itself may provide an API that you can use. This is the most reliable option.

  2. For executing actions, you can use coordinates. You can base all click, etc. actions off coordinates but this is highly dependent on the browser rendering, screen resolution, etc. This will not help you get text out of the CANVAS though.

  3. For the text, you really don't have any options to get the text directly. You could take screenshots and verify the text after the run is complete but that's about your best option. If you wanted to get really fancy, depending on the text, etc. you may be able to find an OCR library that will be able to extract the text from the screenshot that you took.

Canvas does not separate the graphics it drew included text. You need OCR. You may use a tool to cut the canvas image to clipboard and invoke a program to paste the image to preprocess, and perform OCR. Image preprocessing will extract the region of interest which is the text to improve OCR accuracy.

How to Get Text inside a Canvas using Webdriver or Protractor的更多相关文章

  1. jsp报错问题之“使用jstl的c标签choose报错Illegal text inside "c:choose" tag问题”

    一.报错 [bessky_it][ERROR][2022-03-25 17:19:07] | PLATFORM | ):[c]鍜孾/com.bessky.pss.portal/purchase/sam ...

  2. Html5 Canvas Text

    html5 canvas中支持对text文本进行渲染;直接的理解就是把text绘制在画布上,并像图形一样处理它(可以加shadow.gradient.pattern.color fill等等):既然它 ...

  3. 在canvas上面拖拽对象。

    原文:https://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/ 下面作者的原始的版本会抖动一下(鼠标刚点下去的时候,位置会发生 ...

  4. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  5. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  6. canvas调用scale或者drawImage图片操作后,锯齿感很明显的解决

    <script type="text/javascript"> //解决canvas画画图片 var mengvalue = -1; var phoneWidth = ...

  7. 用Canvas实现动画效果

    1.清除Canvas的内容 clearRect(x,y,width,height)函数用于清除图像中指定矩形区域的内容 <!doctype html> <html> <h ...

  8. Canvas制作天气预报走势图

    要实现的效果如下图: HTML代码如下: ;;;;;;;;;;; }

  9. html5、canvas绘制本地时钟

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. Python重要网址

    极客学院视频:http://www.jikexueyuan.com/path/python/ 知乎爬虫:https://www.zhihu.com/collection/129856874?page= ...

  2. maven项目中添加Tomcat启动插件

    在pom.xml文件中添加如下配置: <!-- 配置tomcat插件,pom.xml里配置 --> <build> <plugins> <plugin> ...

  3. 单例模式多线程安全写法(double-lock-check)

    原始版本 public static Object getInstance() { if (instance != null) { return instance; } instance = new ...

  4. 算法bug修复

    问题一: 160length:4length:4length:4length:4290length:2length:2160length:5length:5length:5length:5length ...

  5. k8s 容器的生命周期钩子

    钩子有两个一个容器起之前定义一个动作PostStart,容器关闭之前定义一个动作PreStop 动作可以是一个命令或http请求 示例 spec: containers: - lifecycle: p ...

  6. spring注解注入的学习

    spring在开发中起到管理bean的作用,不管是web应用还是应用软件开发.注入有多种方式,其中注解注入最为受欢迎.(java api 在1.6版本以上才引入关键的注解类如:@Resource) 配 ...

  7. 开发中清除css加载的缓存使用

  8. VS 星期作业 if else的应用 做一个受不受异性欢迎的小程序

    static void Main(string[] args) { //漏掉代码 输入错误 进行提示! string T1, T2, T3, T4, T5, T6, T7, T8, T9, T10=& ...

  9. 018-AJAX异步请求XMLHttpRequest

    创建XMLHttpRequest对象 一.先来创建XMLHttpRequest对象在IE.Firefox.safari和Opera中创建该对象的JavaScript代码为: var xhr = new ...

  10. gpg无法生成密钥对的问题

    今天在archlinux中生成key的过程中,发现卡在收集随机信息的步骤了. 而在windows系统中启动kleopatra之后,一直是一个任务条,显示loading certificate cach ...