gpt4 book ai didi

javascript - 保存高分辨率 HTML5 Canvas 图像

转载 作者:太空狗 更新时间:2023-10-29 15:41:03 24 4
gpt4 key购买 nike

我正在 HTML5 中制作透视校正图像过滤器。该算法已准备就绪并且运行良好。

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

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

所以我有两件事:一个用户用来配置和预览的低分辨率视口(viewport) (720x480),以及一个高分辨率背景视口(viewport)(图像的大小,只是临时创建以渲染图像并销毁它们,全部在 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 行,它不会崩溃,所以渲染工作正常。同样,对于上述图像的一半分辨率,它工作正常,所以它只是一个尺寸问题。

我希望我明白了^^

谢谢!

卢卡斯

最佳答案

OK,用Orion说的技巧解决了问题。基本上我是这样做的:

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

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

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

关于javascript - 保存高分辨率 HTML5 Canvas 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25222397/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com