toDataURL 使 Chrome 崩溃答案

【问题标题】：toDataURL crashing ChrometoDataURL 使 Chrome 崩溃
【发布时间】：2014-09-26 10:26:12
【问题描述】：

所以我正在为 three.js 开发 Tile Renderer，一切似乎都在工作。

其作用方式如下：

a) 创建一堆相机， b) 在每个摄像机中渲染场景 c) 创建一个“toDataURL”并下载它。

一些代码：

  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();

现在因为我多次这样做，（理想情况下是任意大的次数）。它最终可能会产生数百张图像。

这样做会使我的 chrome 标签页崩溃。从字面上看，每次。我想知道是否有办法阻止这种情况发生？在我运行 chrome 时设置一个标志，或者对代码做一些事情。我尝试过为每个渲染调用设置超时（AKA 暂停渲染器，而不是渲染 1 张图像并每 10 秒保存一次），但即使这样似乎也不起作用。

您可以在此处查看崩溃：http://cabbi.bo/ENOUGH/（按“p”尝试捕获图像，页面需要一点时间才能加载）。

提前感谢您的帮助！

艾萨克/卡比博

【问题讨论】：

可能内存不足与二进制数据相比，base64 数据 uri 内存占用量很大;将循环放慢一点，以便 toDataURL 有一些时间来处理（即使用 setTimeout 循环）并确保在单击后删除节点
是的，这是我尝试的第一步。你认为每张图片可能需要超过 10 秒的时间来处理吗？
经过更多调查，即使我调用它一次，它似乎也会中断，并且与尝试自动下载图像比 toDataURL 的大小有更多关系......

标签： javascript canvas hyperlink three.js todataurl

【解决方案1】：

在我的机器上，将大图像保存为 PNG 会使 Chrome（OS X 10.10、Chrome 40）崩溃。保存image as a JPG 可以解决这里的问题。我猜 PNG 数据字符串太大了。

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

【讨论】：

这将导致图像颜色错误
绝对不是答案。问题是在创建 PNG 文件时如何解决这个问题。