Geek Answers Handbook

How to upload images using a web worker?

I am trying to upload images using the webworker api. I have large images on my html page, so it takes 5 minutes to download all the images, so I use webworker to upload the images.

here is the technique.

  • I keep the src attribute of the entire img tag empty on the html page.

  • All images have a unique identifier for each img, for example id = events_all_1_01 , that is, the src image will be "images / keywords / events / all / 1 / 01.jpg ". ie last part events / all / 1 / 01.jpg is id.

Main.html File

<body> <script src="js/modernizr.custom.js"></script> <script language="javascript"> window.onload = function(){ if (Modernizr.webworkers) { var worker = new Worker('js/webworker/test_ww_23_04.js'); worker.onmessage = function(event) { var url = event.data.replace(/_/g, "/"); var image_src = "pictures/keywords/"+url+".jpg"; var img = new Image(); img.src = image_src; img.onload = function(){ // do stuff when your image is loaded document.getElementById(event.data).src = image_src; } }; worker.onerror = function(e) { alert('Error: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message); }; var img_container = document.getElementById("wrapper"); var image_array = img_container.getElementsByTagName('img'); for(var i=0;i<image_array.length;i++){ var img_id = image_array[i].id; console.log(img_id); // http://jsfiddle.net/5vyseob7/ postMessage(img_id); // http://jsfiddle.net/k04t6760/ here i am passing id one by one to webworker.. } } // end of if condition } // end of window.onload() </script> <div id="wrapper" style="height: 500px;width: 200px;overflow-y: auto;border: 1px solid gray;"> <div id="pictures1"> <div class="effect-1"> <div><img src="" id="events_all_1_01" width="150" height="100"></div> <div><img src="" id="events_all_1_02" width="150" height="100"></div> <div><img src="" id="events_all_1_03" width="150" height="100"></div> <div><img src="" id="events_all_1_04" width="150" height="100"></div> </div> <hr/> <div class="effect-2"> <div><img src="" id="events_all_2_01" width="150" height="100"></div> <div><img src="" id="events_all_2_02" width="150" height="100"></div> <div><img src="" id="events_all_2_03" width="150" height="100"></div> <div><img src="" id="events_all_2_04" width="150" height="100"></div> </div> <hr/> <div class="effect-3"> <div><img src="" id="events_all_3_01" width="150" height="100"></div> <div><img src="" id="events_all_3_02" width="150" height="100"></div> <div><img src="" id="events_all_3_03" width="150" height="100"></div> <div><img src="" id="events_all_3_04" width="150" height="100"></div> </div> <hr/> <div class="effect-4"> <div><img src="" id="events_all_4_01" width="150" height="100"></div> <div><img src="" id="events_all_4_02" width="150" height="100"></div> <div><img src="" id="events_all_4_03" width="150" height="100"></div> <div><img src="" id="events_all_4_04" width="150" height="100"></div> </div> </div> </div> </body>

website code.

  //var src = 'pictures/keywords/events/all/1/01.jpg'; //var id = src.substring(src.substring(0,18).length).split('.')[0].replace(/\//g, "_"); // Creating id here......events_all_1_01 //var fst = id.substring(0, id.lastIndexOf("_")+1); // get first part.... events_all_1 //var lst = parseInt(id.substr(id.lastIndexOf("_")+1)); // get last part ie imagename ..01,02,03 etc....... and convert it to int function LoadImages(currID) { setTimeout(function() { postMessage(currID); }, 100); } self.onmessage = function(event) { var currID = event.data; LoadImages(currID); };

I get the following error:

Uncaught SyntaxError: Failed to execute 'postMessage' in 'Window': Invalid target origin '' in postMessage call.

+7
javascript html image web-worker
source share
1 answer

Typo Error:

 ... worker.onmessage = function(event) { var url = e.data.replace(/_/g, "/");

e is not defined ... you probably meant function(e) or event.data.replace

UPDATE

The window does not have a postMessage method ... you need to use the worker.postMessage working method

+2
source share

More articles:


All Articles