Hi I am developing small school app using angular.js and php that captures images from canvas and then stores it in mySql db.
The images are stored image/png;base64 string.
My problem is that when I load these images (300 images of 11.2Kb) it takes lot of time to display it on screen (approx 1 minute for 3Mb HTML).
Are there any libraries or angular directives that I can use to cache these images when displaying?
Well, first of all, storing images in the DB is quite a bad practice. I would recommend you to save images as binary files and store the upload paths.
Second, storing large images in base64 would take more memory (base64 images are usually ~33% larger than binaries), and, as claimed here, rendering them might take a significantly more time.
base64 encoded data may possibly take longer to process than binary data (again, this might be exceptionally painful for mobile devices, which have more limited CPU and memory)
BTW if I misunderstood you and the bottleneck is reading images from the db, then storing images as files would also help ;)
