CODEWITHSUNDEEP
javascriptangularionic-frameworkdata-binding
tomriddle_1234
tomriddle_1234

Reputation: 3213

How to bind frequent changing image data in Angular / Ionic?

I have a frequent change img src data, I bind it like this.

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

The previewImage keeps changing in component in a loop like,

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

Say the image data could change 10 times per second.

Now here comes the issue. According to my experience with Angular 4's data binding, as long as the data changed, it should reflect in the view. But for me it didn't work as expected, it loads the first image correctly, then it updates around each 20 seconds, it should be 10 frames per seconds, not 20 seconds a frame !

Either such process is extreme slow, like 20 seconds an update, or there is some problem I didn't know about image binding. Maybe it doesn't work like this for image data. BTW, each image could contain around 100k data.

So how to bind a frequent change image data in Angular?

Possible direction:

  1. Using canvas instead of image, drawing the image directly on html. Will it be faster?

  2. Maybe it's the angular change detection issue, when image data changes, angular didn't react immediately.

  3. Maybe it's the image loading scheme, since my image data is base64 string, browser may take more time to load the image, how to avoid the image loading time?

Upvotes: 1

Views: 821

Answers (2)

tomriddle_1234
tomriddle_1234

Reputation: 3213

I think I got a temp solution in my case.

Previously I got 20 seconds delay before loading one image, this was due to mainly 2 reasons.

First, it is the bad use of interval observable to process the image data, since it doesn't care if in one cycle, the data processing is completed or not. I changed it to repeatWhen to solve the problem.

Second, both original JS and RxJS only use one thread, when image loading and image data processing (lots of loops) could be very slow, it doesn't catch up when the image data keeps coming in, causing delays when the tasks happen asynchronously. My solution is to move all the data processing into a separated web worker, to use another thread, in my case, probably the another core of the cell phone.

Please check my other questions on this, to figure out the whole thing I met. Hope it helps.

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?

Upvotes: 0

user8098507
user8098507

Reputation:

you could try using a list and changing the content of the previewImage with $interval(someFunction, timeToWait); instead of looping the elements, because you dont know how much it takes to load the image and it might be more than what you expect it to be. like this:

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

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

Hope it helps!

Upvotes: 1

Related Questions