将测试图像加载到画布中答案

【问题标题】：Loading test image into canvas将测试图像加载到画布中
【发布时间】：2014-11-17 21:09:44
【问题描述】：

我正在尝试测试一个 AngularJS 服务，该服务从画布中获取 ImageData，进行一些模式识别，并返回识别的模式。我想编写一个单元测试（不是 E2E 测试），逐步构建服务。我无法正确加载可以绘制到画布上的 test-png 图像，然后我可以从中提取 ImageData。

我想学习解决问题的正确方法：在单元测试中为测试图像获取 ImageData 对象。我目前正在做什么，使用 Karma、Jasmine 2、PhantomJS：

it('simple pattern', function (done) {
  var canvas = angular.element('<canvas></canvas>')
  var context = canvas[0].getContext("2d")

  var src = 'test/images/3x3-bw-1star.png'   // Not found by PhantomJS
  var src2 = "app/images/yeoman.png"         // Found.
  var image = angular.element('<img src="' + src + '"/>')
  image.onerror = function() {  // Not called.
    fail("Could not load image.")
    done()
  }
  image.onload = function() {  // Not called.
    context.drawImage(image[0], 0, 0)
    var imageData = context.getImageData(0, 0, image.width, image.height)
    expect(starFinder.findStars(imageData)).toEqual(true)
    done()
  }
}

这段代码的问题：

PhantomJS 无法在 src (404) 加载测试图像。 src2 处的生产映像已正确加载。路径是正确的，我在任何地方都没有看到对“app”目录的任何限制。
永远不会调用onload。可能是事件处理程序附加到了后期，所以当 angular.element 调用返回时，图像已经加载。
如果我手动调用 onload，上下文是未定义的。

【问题讨论】：

首先，正如您所说，我会在附加src 之前附加onload 和onerror 回调并在此处报告错误。

标签： html angularjs unit-testing canvas karma-runner

【解决方案1】：

在@MarcoCI 的（正确）建议之后，我认为我在认真研究错误的抽象层。因此，我搜索了一个合适的图像处理库，并偶然发现了Caman。然后我重构了服务以接受一个 caman 对象。在测试中，我使用画布和图像 URL 创建了一个 Caman 对象。这对我想做的事情来说是正确的：获取图像并对其进行分析。

测试图像的404错误可以通过将图像添加到files as served-but-not-included列表中来解决：

  {pattern: 'test/images/*.png', watched: true, served: true, included: false}

然后设置urlRoot。

urlRoot: 'base'

加载和事件处理由 Caman 完成。

【讨论】：