Canvas toDataURL（） 返回空白图像

最有可能的是，在绘制到画布的时间和调用 .默认情况下，画布在每次合成后都会被清除。要么通过使用toDataURLpreserveDrawingBuffer: true

var gl = canvas.getContext("webgl", {preserveDrawingBuffer: true});

或者确保在退出用于呈现的任何事件之前调用 toDataURL。例如，如果您这样做

function render() {
  drawScene(); 
  requestAnimationFrame(render);
}
render();

在其他地方这样做

someElement.addEventListener('click', function() {
  var data = someCanvas.toDataURL();
}, false);

这两个事件 ， 和 不同步，在调用它们之间可能会清除画布。注意：画布不会显示为清除，因为它是双缓冲的，但缓冲区 toDataURL 和影响该缓冲区正在查看的其他命令将被清除。animation frameclick

解决方案是在渲染相同的事件中使用或调用。例如preserveDrawingBuffertoDataURL

var captureFrame = false;

function render() {
  drawScene(); 

  if (captureFrame) {
    captureFrame = false;
    var data = someCanvas.toDataURL();
    ...
  }

  requestAnimationFrame(render);
}
render();

someElement.addEventListener('click', function() {
  captureFrame = true;
}, false);

哪个是默认值有什么意义？它可以明显更快，尤其是在移动设备上，不必保留绘图缓冲区。另一种看待它的方法是浏览器需要 2 个画布副本。您正在绘制的那个和它正在显示的那个。它有 2 种方法来处理这 2 个缓冲区。（一）双缓冲。允许您绘制到一个，显示另一个，在完成渲染后交换缓冲区，这是从退出发出绘制命令的任何事件中推断出来的 （B） 复制要绘制的缓冲区的内容以执行正在显示的缓冲区。交换比复制快得多。因此，交换是默认设置。这取决于浏览器实际发生的情况。唯一的要求是，如果 is 在复合后清除绘图缓冲区（这是另一个异步事件，因此不可预测），如果是，则必须复制，以便保留绘图缓冲区的内容。preserveDrawingBuffer: falsepreserveDrawingBufferfalsepreserveDrawingBuffertrue

请注意，一旦画布具有上下文，它将始终具有相同的上下文。换句话说，假设您更改了初始化 WebGL 上下文的代码，但您仍然希望设置preserveDrawingBuffer: true

至少有 2 种方法。

首先找到画布，获取其上下文

因为稍后的代码最终将具有相同的上下文。

<script>
document.querySelector('#somecanvasid').getContext(
    'webgl', {preserveDrawingBuffer: true});
</script>
<script src="script/that/will/use/somecanvasid.js"></script>

因为你已经为该画布创建了一个上下文，所以后面的任何脚本都将获得相同的上下文。

增加getContext

<script>
HTMLCanvasElement.prototype.getContext = function(origFn) {
  return function(type, attributes) {
    if (type === 'webgl') {
      attributes = Object.assign({}, attributes, {
        preserveDrawingBuffer: true,
      });
    }
    return origFn.call(this, type, attributes);
  };
}(HTMLCanvasElement.prototype.getContext);
</script>
<script src="script/that/will/use/webgl.js"></script>

在这种情况下，在扩充 之后创建的任何 webgl 上下文都将设置为 true。getContextpreserveDrawingBuffer