如何使用 Webdriver 或 Protractor 在画布内获取文本答案

【问题标题】：How to Get Text inside a Canvas using Webdriver or Protractor如何使用 Webdriver 或 Protractor 在画布内获取文本
【发布时间】：2019-11-27 13:19:07
【问题描述】：

我有一个画布，我想在画布中获取文本。我可以将鼠标悬停在画布内，但不确定如何获取文本。上传了我需要使用量角器验证场景的图像请帮忙？

<canvas style="background-color: rgb(255, 255, 255); width: 395px; height: 194px; cursor: auto;" width="592" height="291"/>

【问题讨论】：

标签： canvas selenium-webdriver html5-canvas protractor

【解决方案1】：

基本情况是您不能使用 Selenium。 CANVAS 标签就像页面中的一个小程序。它实际上不包含任何 HTML。有几个选项：

如果您有权访问开发人员，则可以让他们为您公开一个 API，以便您可以使用 Selenium 脚本中的 Javascript 访问文本等。如果它是某个库等的一部分，则库本身可能会提供您可以使用的 API。这是最可靠的选择。
对于执行动作，您可以使用坐标。您可以将所有点击等操作都基于坐标，但这高度依赖于浏览器渲染、屏幕分辨率等。不过，这无助于您从CANVAS 中获取文本。
对于文本，您确实没有任何选项可以直接获取文本。您可以在运行完成后截取屏幕截图并验证文本，但这是您的最佳选择。如果您想要真正花哨，取决于文本等，您也许可以找到一个 OCR 库，该库能够从您拍摄的屏幕截图中提取文本。

【讨论】：

【解决方案2】：

Canvas 不会将其绘制的图形与包含的文本分开。您需要 OCR。您可以使用工具将画布图像剪切到剪贴板并调用程序将图像粘贴到预处理，并执行 OCR。图像预处理将提取感兴趣的区域，即文本，以提高 OCR 的准确性。

【讨论】：

【解决方案3】：

画布上的细节呈现为图像。因此，除非它们处于单独的控制之下，否则您将无法读取画布上的数据。

您可能需要考虑相同的图像比较。

在画布上执行任何操作：browser.actions().mouseMove(Canvas, { x: 202, y: 101 }).click().perform();

【讨论】：

【解决方案4】：

Canvas 没有在 HTML 标签中提供任何属性。这就像一个图像，您必须将其保存为图像并与预期的图像进行比较。截取特定画布的屏幕截图并使用 base64 将其解码为 png。

` WebElement canvas = d.findElement(By.xpath(""));

   String pngData = js.executeScript("return arguments[0].toDataURL('image/png').substring(22);", canvas).toString();    
   System.out.println(pngData);
   byte[] canvas_png = Base64.getDecoder().decode(pngData);
   FileOutputStream fos = null;
   try {
       File imgFile = new File("path");
       fos = new FileOutputStream(imgFile);
       fos.write(canvas_png);
   } catch(Exception e) {
       e.printStackTrace();
   } finally {
       if (fos != null) {
           fos.close();
       }
   }

   `

【讨论】：