如何在Angular/Ionic中綁定頻繁變化的圖像數據？

Question

我有一個頻繁的更改IMG SRC數據，我這樣綁定它。

<img [src]="previewImage" alt="Preview Image" /> 

的previewImage保持在一個循環中一樣分量變更，

for (let i=0;i<Anumber;i++){ 
    this.previewImage = "data:image/jpeg;base64,"+ this.hexToBase64(imageBytes) ; 
} 

說的圖像數據可能每秒改變10倍。

現在問題來了。根據我對Angular 4的數據綁定的經驗，只要數據發生變化，它應該反映在視圖中。但對我而言，它沒有像預期的那樣工作，它正確加載第一個圖像，然後它每20秒更新一次，它應該是每秒10幀，而不是每幀20秒！

這樣的過程極其緩慢，比如更新20秒，或者存在一些我不瞭解圖像綁定的問題。也許它不適用於圖像數據。順便說一句，每個圖像可能包含大約100k數據。

那麼如何在Angular中綁定一個頻繁變化的圖像數據呢？

可能的方向：

1. 使用帆布，而不是圖像，直接在HTML繪製圖像。它會更快嗎？

2. 也許是角度變化檢測問題，當圖像數據發生變化時，角度沒有立即反應。

3. 也許這是圖像加載方案，因爲我的圖像數據是base64字符串，瀏覽器可能需要更多時間來加載圖像，如何避免圖像加載時間？

Answer 1

我想我得到了一個臨時解決方案在我的情況。

以前我在加載一張圖片前得到了20秒的延遲，這主要是由於2個原因造成的。

首先，間隔可觀察性不好處理圖像數據，因爲它不關心在一個週期內數據處理是否完成。我將其更改爲repeatWhen來解決問題。其次，原始的JS和RxJS只使用一個線程，當圖像加載和圖像數據處理（大量循環）可能非常緩慢時，在圖像數據不停地進入時它不趕上，導致延遲任務異步發生。我的解決方案是將所有數據處理移動到一個單獨的web worker中，以使用另一個線程，在我的情況下，可能是手機的另一個核心。

請檢查我的其他問題，找出我遇到的所有事情。希望能幫助到你。

How to release memory of the responseText in an endless streaming request?

Endless HTTP Stream Observable not emitting anything but data transferred

How to display Motion JPEG binary data stream with Angular/Ionic/JS?

Answer 2

你可以嘗試使用列表和改變previewImage的內容與$interval(someFunction, timeToWait); ，而不是循環的元素，因爲你不知道它有多少需要加載圖像，它可能比你期望的更多它是。 這樣的：

$scope.changePreview =() => { 
    //get next element from the list 
    $scope.preview = nextElementFromTheList; 

$interval($scope.changePreview(), 10 * 1000); //毫秒

希望它能幫助！