Question

我有一个JavaScript应用程序，根据网页的大小创建相对较大的画布图像。对于某些页面，画布.toDataURL();的大小将超过2mb，并且在尝试使用window.location将用户定向到该图像时，它将给出一个 “哦，快速”Chrome崩溃窗口立即。

经过一些研究后，我发现Chrome中的最大网址大小仅限于2 * 1024 * 1024 bytes。它在FF4中运行良好，所以可能它有更高的限制。

有没有其他方法如何在没有任何服务器交互的情况下将canvas图像传递到新页面？

示例： Canvas创建仅适用于FF4 /较新版本的Chrome。等待画布重叠在页面顶部，按住Shift键单击它会调用url更改：

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

给它加载画布几秒钟（没有消息表明页面已经覆盖了一页）

Canvas＆gt; 2mb：example 1

Canvas＆lt; 2mb：example 2，example 3

Answer 1

如果您拥有两个页面，即您要发布的页面以及您要发布的页面，请查看postMessage API，该API允许您将数据从一个页面传递到另一个页面。

第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 
});

如果您需要在服务器上没有页面URI编码一个html页面，上面的代码并打开 - 不可否认它是一个黑客。以下是显示测试的示例：

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

您要编码的HTML示例位于http://jsbin.com/akobi4，然后从第A页开始调用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, "*");
});

将Chrome用户重定向到画布创建的图像（超过2mb）

1 个答案: