canvas - 集成测试 Canvas

Question

在过去的几周里，我一直在尝试各种方法，试图找到将 BDD 用于依赖于 HTML5 Canvas 元素以及用户与之交互的 Web 应用程序的最佳方法。

我一直在使用 Jasmine 和 Cucumber 和 Rspec，对我的应用程序的每个部分进行规范和集成测试，但是我必须对 Canvas 进行集成测试的任何尝试都出现了......不成功。我写了一个 jQuery 插件来处理与 Canvas 的交互以及初始化它。

我想集成测试 Canvas 上的实际绘图，确保当你调用类似

$("canvas").draw("lineTo", 10, 10)

实际上在 Canvas 元素上的点 (10,10) 上创建了一条线。这就是已经证明的改变，我尝试在任何绘制的像素上使用上下文方法 getImageData() 。这让我陷入了困境，无论我如何查询 Canvas ，我都会得到表示黑色透明像素的像素数据，MDC 表示我正在脱离上下文查询 Canvas 。

我认为这是带有 RoR 的 Jasmine gem 的问题。如果我能解决这个问题，我会很高兴，但这并不是我愿意接受的唯一解决方案。我真的很想帮助想出一种有效的方法来集成测试 Canvas ，即使我实际上并没有直接检查像素数据。

感谢任何人的帮助，这真的让我陷入了困境。

Answer 1

我编写了一个工具 js-imagediff，它与 Jasmine 集成用于测试 Canvas 。你可以在这里看到一个例子:unit testing canvas with javascript imagediff and jasmine .让我知道这是否有用。

但是，它确实使用 getImageData 来进行差异处理。您是否收到该调用的特定错误？或者您是否有指向您所指的 MDC 页面的链接？