Angular/Ionicで頻繁に変化する画像データをバインドする方法は？

Question

私は頻繁な変更img srcデータを持っています。私はこのようにバインドします。 previewImageのようなループ内の成分に変化し続ける

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

、

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

は、画像データが毎秒10回を変えることができると言います。

ここに問題があります。 Angular 4のデータバインディングに関する私の経験によれば、データが変更されている限り、ビューに反映されるはずです。しかし、それは私のために期待どおりに動作しませんでした、それは最初の画像を正しく読み込んで、それは20秒ごとに更新されます、それは20秒フレームではなく、毎秒10フレームでなければなりません！

このようなプロセスは、20秒間のアップデートのように極端に遅いか、イメージバインディングについてわからない問題があります。画像データの場合は、このように動作しない可能性があります。それぞれの画像に約100kのデータが含まれている可能性があります。

どのように頻繁に変更する画像データを角度でバインドするのですか？

可能な方向：

1. HTML上に直接画像を描画キャンバスの代わりに画像を使用します。それは速くなるでしょうか？

2. 画像データが変化すると角度が直ちに反応しない場合があります。

3. 私の画像データがbase64文字列なので、ブラウザが画像を読み込むのにもっと時間がかかることがあります。画像の読み込み時間を避けるにはどうすればいいですか？

   あなたはそれがイメージをロードするのにかかると、それはあなたが期待する以上のものかもしれませんどのくらい知らないので、リストを使用して、代わりに要素をループするの$interval(someFunction, timeToWait); でpreviewImageの内容を変更しようとすることができ

Answer 1

私の場合は一時的な解決策があると思います。

以前は1つの画像を読み込む前に20秒遅れましたが、これは主に2つの理由によるものです。

最初に、1サイクルでデータ処理が完了したかどうかは気にしないので、画像データを処理するのに観測可能な間隔の悪い使用です。問題を解決するためにrepeatWhenに変更しました。

第2に、オリジナルのJSとRxJSはどちらもスレッドを1つしか使用しません。画像のロードと画像データの処理（ループが多い）が非常に遅い場合、画像データが入ってきたときに追いつかず、タスクは非同期に発生します。私の解決策は、別のスレッド、私の場合はおそらく携帯電話の別のコアを使用するために、分離されたWebワーカーにすべてのデータ処理を移動することです。

私が会ったすべてのことを理解するためにこれに関する私の他の質問を確認してください。それが役に立てば幸い。

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

そうである。このような ：

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

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

はそれが役に立てば幸い！