Javascript 保存高分辨率HTML5画布图像

我正在用HTML5制作一个透视校正图像过滤器。算法已准备就绪，运行良好

但我在导出图像时遇到问题

我使用带有Three.js的WebGL上下文进行透视校正，因此我可以在GPU上快速执行操作（它实际上工作非常快，在不到半秒的时间内完成3680x2760图像渲染）

所以我有两件事：一个低分辨率的视口（720x480），用户用来配置和预览；一个高分辨率的背景视口（图像的大小，只是临时创建来渲染图像，然后将其销毁，所有这些都在RenderHighRes函数中完成）

但我的谷歌浏览器在打开图像时崩溃了，可能是因为图像的大小和源格式。对于导出图像，我使用以下代码：

console.log("Rendering");
vcomposer.render(); 
console.log("Rendered! Exporting");
var URL = vcomposer.renderer.domElement.toDataURL("image/jpeg");
console.log("Exported! Opening");
window.open(URL);

无论图像大小如何，我都可以很好地“导出！打开”。但对于较大的图像（如3680x2760），浏览器在打开URL时崩溃。我想这是因为这样的图片有很大的url

所以问题是，我不需要打开图像，只要让用户下载它。我怎样才能做到这一点而不让用户下载dataURL

PS：如果我删除window.open行，它不会破坏任何东西，因此渲染工作正常。同样，对于上述图像的半分辨率，它工作良好，因此它只是一个大小问题

我希望我明白了^^

谢谢

---

卢卡斯用猎户座说的把戏解决了这个问题。 基本上我是这样做的：

已发送主题Orion上的dataURItoBlob函数

    var blob = dataURItoBlob(URL);
    var burl = window.URL.createObjectURL(blob);
    window.open(burl);

---

这样，它会打开一个blobURL，而不是一个大字符串。即使是我提到的两倍分辨率也很好！谢谢：D

您可以尝试将dataURI转换为blob。它将减少图像大小。这个问题可能会有帮助