將測試圖像加載到畫布中

我試圖測試一個AngularJS服務，它從畫布中獲取ImageData，進行一些模式識別並返回識別的模式。我想寫一個單元測試（不是E2E測試），來逐步構建服務。我無法正確加載一張我可以在畫布上繪製的測試png圖像，然後我可以從中提取ImageData。將測試圖像加載到畫布中

我想了解解決我的問題的正確方法：在單元測試中獲取測試圖像的ImageData對象。我目前在做什麼，用噶，茉莉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上的生產映像已正確加載。路徑是正確的，我沒有看到任何地方的「應用程序」目錄的限制。
onload永遠不會被調用。可能的是，事件處理程序被附加到後期，所以當angular.element調用返回時，圖像已經加載。
如果我手動調用onload，上下文是未定義的。

來源

2014-09-23 mknecht

作爲第一個開始，正如你所說的，我會在附加'src'之前附加'onload'和'onerror'回調並在這裏報告錯誤。 – MarcoL 2014-09-24 09:12:51

@ MarcoCI的（正確的）建議後，我認爲我正在認真研究錯誤的抽象層。因此，我搜索了一個合適的圖像處理庫，並且偶然發現了Caman。然後我重構了服務來接受一個caman對象。在測試中，我使用畫布和圖片網址創建了Caman對象。對於我想要做的事，感覺正確：獲取圖像並進行分析。

404錯誤測試圖像可以通過圖像增加的files as served-but-not-included列表來解決：

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

，然後設置urlRoot。

urlRoot: 'base'

加載和事件處理由Caman完成。

來源

2014-09-24 17:01:02 mknecht

將測試圖像加載到畫布中

回答

相關問題