保存高分辨率 HTML5 画布图像答案

【问题标题】：Saving High-resolution HTML5 Canvas Image保存高分辨率 HTML5 画布图像
【发布时间】：2014-10-03 01:10:33
【问题描述】：

我正在 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 时会崩溃。我认为是因为它为这样的图像获取了 BIG url。

所以问题是，我不需要打开图像，只需让用户下载它。在不让用户下载 dataURL 的情况下如何做到这一点？

PS：如果我删除 window.open 行，它不会崩溃任何东西，所以渲染工作正常。也有上述图像的一半分辨率，它工作正常，所以它只是一个大小问题。

希望我明白了^^

谢谢！

卢卡斯

【问题讨论】：

您可以尝试将dataURI转换为blob。它会减小图像大小。这个问题可能会有所帮助stackoverflow.com/questions/4998908/…

标签： javascript html canvas webgl

【解决方案1】：

好的，用 Orion 说的把戏解决了这个问题。基本上我是这样做的：

获取主题 Orion 发送的 dataURItoBlob 函数。

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

所以通过这种方式，它会打开一个 blob url 而不是大字符串。即使是我提到的双分辨率也能正常工作！谢谢：D

【讨论】：