3

I keep reading that images are already loaded asynchronously, or to use onload (which doesn't solve the problem). When loading a large image, specifically from canvas.toDataURL(), the whole page freezes while the image is being loaded.

What I'm doing specifically is prerendering a procedurally generated map (for a game) in a hidden canvas, then loading that data into an image to draw faster. The actual problem is setting the src, which happens even if I just img.src=img.src to invoke loading again.

Is there any way at all to make large images load over time instead of all at once and causing this huge disruption?

  • 1
    Code? They generally load over time unless you tell them not to, that's what asynchronous means. Actually, it's probably because of the `toDataUrl()` thing; try using the BitmapData or toBlob functions/things to manipulate it, since those shouldn't involve trying to translate the entire image into Base64. – cactus1 Jun 08 '14 at 12:05
  • @cactus1 I have tried `canvas.toDataURL("image/bmp")`, though it didn't seem to have any effect, not even being slightly faster; I'll look up toBlob –  Jun 08 '14 at 12:11
  • Actually, look at this site ( http://www.i-programmer.info/programming/graphics-and-imaging/2078-canvas-bitmap-operations-bitblt-in-javascript.html ) and ( http://stackoverflow.com/questions/4532166/how-to-capture-a-section-of-a-canvas-to-a-bitmap ). Sorry, I skimmed your question and didn't notice you were trying to make a game; you shouldn't need to mess with converting the image into a file, and basically use only canvas drawing operations if you want performance. – cactus1 Jun 08 '14 at 12:32
  • Unfortunately, both drawImage from buffer (2x) and putImageData (many x) are far slower than drawImage from image, which is why I'm using an image. I would much prefer to use imageData if only it weren't so terribly slow. –  Jun 08 '14 at 12:39
  • Hmm.. What about just stacking the two canvases on top of each other and hiding the prerendering canvas with the top one until it's done rendering? Also, how much do you need speedwise? Can you get away with the 2x slowdown from drawImage? Sorry for not being very helpful. – cactus1 Jun 08 '14 at 12:49
  • The prerendering is instantaneous; that's one thing I'm proud of, it's just loading the image that's slow and then using drawImage from canvas each frame being slower than drawImage from image. Although currently, I think I have things optimized well enough that it'll still be 60 fps without the excess performance, so I suppose this solution will work. Still, it would be nice, for future reference, to solve this pesky image-freezing problem. –  Jun 08 '14 at 12:55
  • Sorry, one last thing to try I guess, it looks like there's a bug with drawImage on Chrome ( http://stackoverflow.com/questions/16022781/using-drawimage-with-canvas-is-very-slow-on-chrome ). Maybe tiling the image into smaller chunks would get you the speed you want? – cactus1 Jun 08 '14 at 13:04
  • "When loading a large image from canvas.toDataURL(), the whole page freezes while the image is being loaded". That's because .toDataURL is not asynchronous. – markE Jun 08 '14 at 16:51
  • @markE "The actual problem is setting the src, which happens even if I just img.src=img.src to invoke loading again." –  Jun 09 '14 at 23:39
  • I would also like to note that (at least in my case) not just `img.src=img.src`, but the very `canvas.toDataURL()` call freezes the page. This ruins some possible front-end graphic processing techniques, so I would love this post to be updated if @fay manages to find a solution. Thanks. – bonflash Aug 20 '14 at 16:58

1 Answers1

0

This question is 6 years old but I stumbled across it and others may as well. I am guessing that you first load the image by assigning img.src="image.png", then in its onload you are doing the processing and then replacing the image's data with the processed data by going img.src = canvas.toDataURL(), which then fires the onload again and goes on in an endless recursion.

caPNCApn
  • 153
  • 7