Question

我正在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);

我可以和＃34;导出！开口＆＃34;无论图像大小。但是对于更大的图像（如3680x2760），浏览器在打开URL时会崩溃。我认为它是因为它获得了像这样的图像的大网址。

所以问题是，我不需要打开图像，只需让用户下载即可。如果不将dataURL发送给用户下载，我怎么能这样做呢？

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

我希望我明白了^^

谢谢！

卢卡斯

Answer 1

好吧，用Orion所说的技巧解决了这个问题。基本上我做到了：

在Orion发送的主题上获得了dataURItoBlob函数。

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

因此，通过这种方式，它会打开一个blob网址而不是大字符串。工作正常，甚至我提到的双倍分辨率！谢谢：D

保存高分辨率HTML5画布图像

1 个答案: