Redirecting Chrome users to canvas created images (that are over 2mb)

I have a JavaScript application which creates r开发者_如何学JAVAelatively large canvas images, depending on the size of the webpage. For some pages, the size of the canvas .toDataURL(); will surpass 2mb, and upon trying to direct the user to that image with window.location it will give an "Oh snap" Chrome crash window immediately.

After doing some research I found that the max url size in Chrome is limited to 2 * 1024 * 1024 bytes. It works fine in FF4, so presumably it has a higher limit.

Are there any other methods how to pass a canvas image onto a new page without any server interaction?

Examples: Canvas creation only works with FF4/newer versions of Chrome. Wait for the canvas to be overlayed on top of the page, shift-clicking it will call the url change with:

var a = canvas[0].toDataURL();
window.location.assign(a);

Give it a good few seconds to load the canvas (there is no message which indicates that the page has been overlayed with one)

Canvas >2mb: example 1

Canvas <2mb: example 2, example 3

If you own both pages, the one you are posting from and the one you are posting too, check out the postMessage API that allows you to pass data from one page to another.

Page A:

var w = window.open("pageB.html");
w.addEventListener("load", function() {
  // You can only post messages once they page has loaded.
  w.postMessage(imgDataURI, "*");
});

Page B:

window.addEventListener("message", function(msg) {
  var data = msg.data;
  //data will be the string 
});

If you need to not have a page on the server URI encode an html page, with the above code in and open that - admittedly it is a hack. Below is an example that displays test:

window.open("data:text/html;charset=utf-8;base64,PGh0bWw%2BPGJvZHk%2BPGgxPlRlc3Q8L2gxPjwvYm9keT48L2h0bWw%2BDQo%3D");

An example of the HTML that you would encode is at http://jsbin.com/akobi4, then from page A you would call var w = window.open("data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw%2BDQo8aHRtbD4NCjxoZWFkPg0KPG1ldGEgY2hhcnNldD11dGYtOCAvPg0KICA8c2NyaXB0Pg0KICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJtZXNzYWdlIiwgZnVuY3Rpb24obXNnKSB7DQogICAgICB2YXIgaW1nMSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJpbWcxIik7DQogICAgICBpbWcxLnNyYyA9IG1zZy5kYXRhOw0KICAgIH0pOw0KICA8L3NjcmlwdD4NCiAgPC9oZWFkPg0KPGJvZHk%2BDQogIDxpbWcgaWQ9ImltZzEiIC8%2BDQo8L2JvZHk%2BDQo8L2h0bWw%2B");

w.addEventListener("load", function() {
  // You can only post messages once they page has loaded.
  w.postMessage(imgDataURI, "*");
});