webgl画布的toDataURL（）返回透明图像[重复]答案

【问题标题】：toDataURL() of webgl canvas returning transparent image [duplicate]webgl画布的toDataURL（）返回透明图像[重复]
【发布时间】：2015-08-02 00:58:06
【问题描述】：

我无法让 toDataUrl() 工作。这是我试图获取画布图像并将其用作现有图像元素的源的代码。

var canvas = document.getElementById('glcanvas');
canvas.setAttribute('crossOrigin','anonymous');
var img = document.getElementById('imageToShowCanvas');
img.src = canvas.toDataURL();

imageToShowCanvas 显示的是一个损坏的 url。当我 console.log 调用 toDataUrl() 的结果时，我得到一个链接，显示一个带有画布高度和宽度的透明图像。

我听说过导致此类问题的 cors 问题，但我使用带有 –allow-file-access-from-files 标志的 chrome，并且控制台中没有任何安全错误。有没有更简单的方法来获取我的 webGl 画布的屏幕截图？

【问题讨论】：

您是否启用了preserveDrawingBuffer，您使用的是什么浏览器？
这个答案也可能涵盖它。 stackoverflow.com/a/26790802/128511

标签： javascript html canvas webgl

【解决方案1】：

谢谢 LJ，我只需要在获取 webGl 上下文时启用 preserveDrawingBuffer 标志。屏幕截图现在可以完美运行！

【讨论】：

不错！此外，如果您使用 THREE.js，您可以像这样将标志添加到您的渲染中： new THREE.WebGLRenderer({preserveDrawingBuffer: true });