Question

我正在尝试测试一个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，则上下文未定义。

Answer 1

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

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

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

然后设置urlRoot。

urlRoot: 'base'

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

将测试图像加载到画布中

1 个答案: