2 Replies - 538 Views - Last Post: 01 August 2014 - 03:48 PM

#1 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 124
  • View blog
  • Posts: 551
  • Joined: 15-March 14

Aw, snap. Major issue with Chrome.

Posted 01 August 2014 - 03:10 PM

I am trying to use getDataURL to capture a canvas and store it as an image and to save the image to the file system.

Code to save a canvas or image
function saveImageCanvas(filename,img){   // img can be a canvas as well
    var downloaderLnkP = document.createElement('a');       // create download link
    var mouseEvent = document.createEvent("MouseEvents");   // create a mouse even object
    downloaderLnkP.href = img.toDataURL();   //  <<<-------------- crashes here on large images
    downloaderLnkP.download = filename;                     // set the filename
    mouseEvent.initMouseEvent("click", true, true, window,  // create a fake click event
                    0, 0, 0, 0, 0, false, false, false,
                    false, 0, null);
    downloaderLnkP.dispatchEvent(mouseEvent);               // dispatch event to start download
    // img is now downloaded as png to clients download directory.
}


or
function copyCanvasToBitmaps(canvas){
     var image = new Image();           // create an image.
     image.src = canvas.toDataURL();    <<<--------------------crashes here
     // no onload needed as toDataURL is blocking so only get here when loaded.
     return contentManager.bitmaps.addNewImage("grooverCapture"+contentManager.IDs.getGUID()+".png");  // add image to app
}


When I do this on a large image. (exact size not known but varies depending on what I am doing with the URL) I get the dreaded Aw, snap. This completely stop the app and all web workers, without any events being fired to at least give me some error management. After some digging I have found that this is a known bug in chrome and has been since 2011 Chrome Version 9.0.597.19. It looks like they are not interested in fixing this problem.

What is worse is that once the window has crashed it will run very strangely (mouse, graphics, etc) making the app unusable. This is due to the GPU interface being corrupted by the last crash. So if the user clicks reload after the crash the app restarts but is useless and I have no way of knowing if the window is trustable. Nor do i have any way of forcing the window to close if it crashes.

I am stuck for a solution. Most cameras create images over 4000 by 3000 pixels, I can load them but i can not do anything with them.

I would love to know of anyone that has encountered this problem before and has found a work around. I can accept that there is an upper limit to the size of the data URL, because PNG && and JPG images are compressed I can not know when an image will crash or not, because I do not know what size the final URL will be.

I also need to have a way to know if a window has had a crash. I can use a Open and Close cookie or local storage flag to indicate if the app has shutdown correctly, but I can not find a way to know if I am opening up the app in a corrupted window/tab or not.

Anyone with suggestions or solutions your help would be greatly appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Aw, snap. Major issue with Chrome.

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4354
  • View blog
  • Posts: 12,160
  • Joined: 18-April 07

Re: Aw, snap. Major issue with Chrome.

Posted 01 August 2014 - 03:27 PM

Well can you chunk it somehow? Like maybe copy a quarter of the image to a hidden canvas, dataURL that canvas, do that for the other pieces and then stitch all four into a final image? Would be an interesting experiment. You could try using getImageData to grab the pieces and putImageData onto the other hidden canvas. If you can get them into their own individual images, it would just be a matter of copying them into a buffer master image and saving that.

I don't know, sounds like it might be doable, if not the long route. :)
Was This Post Helpful? 0
  • +
  • -

#3 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 124
  • View blog
  • Posts: 551
  • Joined: 15-March 14

Re: Aw, snap. Major issue with Chrome.

Posted 01 August 2014 - 03:48 PM

I have tried cutting the images and canvas up to stop problems with the internal image manipulation. It does create a artifact line on the boundaries when up sampling due to GPU smoothing, but I can fix that. Its just a lot to rewrite if I go for that solution.

But i am still faced with how to save the image. As far as I know, you can not getContext("2d") for a image to allow a putImageData and canvas does not have a source URL so can not be downloaded so I must use canvas.getDataURL. From google the crash is due to the size of the URL so I have to find a way to reduce that.

Thinking about it I can try a AJAX call to push the semi compressed raw image to the server and then have the server return the JPG or PNG for download, but that kind of defeats the standalone goal of the app which is aimed at chrome books and browser only systems, and is very slow compared to just saving from RAM.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1