Loading Images as binary with Webworker built from the function
Few months ago I had to read binary image data from s3 with XHRHttpRequest and then parse ExIf header to determine its orientation.
I had to load and parse numerous images asynchronously. Tried executing it all in one thread; no fun. Browser starts freaking out once I hit 4 images.
Just loading binary image data is a problem.
I am not going to describe the basics of Webworkers in this post. Html5 Rocks explained it with much better English in 2010. Please read that linked article, your future self will thank you for investing time in this.
Load and parse images in separate threads and then pass their metadata to the main thread.
My biggest problems with default Webworker loader are versioning and maintenance of separate files. I don’t like extra dependencies in my code unless I must support unstable versions of browsers.
Try following in the console you’ll get the result.
Please note that there’s a context problem. When you load this to webworker as a blob you’ll start getting weird messages about undefined references. Try calling
I immediately invoke the wrapper function to keep the context.
Final version with xhr calls minus ExIf parser looks like so:
And to utilize that module I just require the module and call it in the view:
Now your webworker is passing messages essential to keep main thread informed of the loading and work process. See
When loading is done it simply kills itself
Important thing to notice that you should transfer objects not copy them (see about transferrable objects Html5 Rocks).
And here’s what we do with the image when worker is done:
Same blob work and ObjectURL.