CODEWITHSUNDEEP
javascriptcanvashyperlinkthree.jstodataurl
Cabbibo
Cabbibo

Reputation: 1411

toDataURL crashing Chrome

So I am working on a Tile Renderer for three.js, and everything seems to be working.

The way that it functions is as follows:

a) Creates a bunch of cameras, b) Renderers the scene in each camera c) creates a 'toDataURL', and downloads it.

Some Code:

  this.renderer.render( this.scene , this.camera );

  var imgData = this.renderer.domElement.toDataURL();      

  //this.imageData.push( imgData );

  var a = document.createElement('a');

  a.href = imgData;

  a.download = this.title + "_"+this.x+"_"+this.y+".png";
  a.click();

Now because I am doing this multiple times, ( Ideally a arbitrarily large amount of times ). It can end up producing hundreds of images.

Doing so crashes my chrome tab. Literally every time. I was wondering if there was anyway to stop this from happening? Either by setting a flag when I run chrome, or doing something with the code. I've tried doing things like setting timeouts for each render call ( AKA pause the renderer, than render 1 image and save it out every 10 seconds ), but even this seems to not work.

You can check out the crash here: http://cabbi.bo/ENOUGH/ ( press 'p' to try and capture the images , and the page takes a moment to load ).

Thank you in advance for your help!

Isaac / Cabbibo

Upvotes: 0

Views: 1424

Answers (1)

Felix Turner
Felix Turner

Reputation: 1463

On my box, saving large images as PNGs crashes Chrome (OS X 10.10, Chrome 40). Saving the image as a JPG fixes the issue here. I'm guessing the PNG data string is too large.

var imgData = renderer.domElement.toDataURL("image/jpeg");

Upvotes: 4

Related Questions