0

I want to split a large image into a number of smaller images and then perform some data manipulation on those smaller images. The second part is fine as I can pass the data to a web-worker, but the splitting of the image uses canvas (so no web-worker), and makes the rest of the page unresponsive whilst it is running.

This wouldn't be a problem really except the loading animation pauses, rendering it pointless.

What is the best way to go about performing the image-splitting canvas operations without freezing the GUI?

Tom
  • 927
  • 3
  • 12
  • 20
  • Which operations are involved in splitting the image? Can you split it into a series of operations? – Felix Kling Apr 28 '12 at 13:56
  • It's a for loop which creates a new canvas, draws part of the original image to the new canvas, then pushes the resulting dataURL to an array. It essentially splits the image into tiles. – Tom Apr 28 '12 at 13:59
  • Then you might be able to create an asynchronous queue. Have a a look at the second part of [my answer here](http://stackoverflow.com/questions/5050265/javascript-nodejs-is-array-foreach-asynchronous/5050317#5050317). – Felix Kling Apr 28 '12 at 14:01

1 Answers1

0

Simply use getImageData with smaller rects at a time and you'll be way better off.

It will take some time to figure out a decent size, but try 200x200 and 400x400 for starters.

You can even update the loading animation as you finish processing each 5/10/15/20% of the image.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171