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

Question

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:

Using canvas instead of image, drawing the image directly on html. Will it be faster?
Maybe it's the angular change detection issue, when image data changes, angular didn't react immediately.
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?

score 1 · Answer 1 · answered Jun 01 '17 at 15:36

1

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!

answered Jun 01 '17 at 15:36

Could you explain, whether the image need to load? In my case, my image data is base64 string, does browser need time to load the image, such delay caused my issue? How can I avoid the loading time since I already have the data? – tomriddle_1234 Jun 01 '17 at 15:39
And also, it's very hard to figure out a list of image, since the data keeps coming, 10 images each second. – tomriddle_1234 Jun 01 '17 at 15:44
You could measure how long it takes for the browser to load the image, and then set an interval, as i explained, to adjust to the time each picture needs. – Jun 01 '17 at 15:44
In my test, it took 20 seconds to load one image, this is apparently wrong – tomriddle_1234 Jun 01 '17 at 16:09

score 0 · Accepted Answer · answered Jun 06 '17 at 14:01

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?

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

2 Answers2