通过canvas将画布保存为图像.toDataURL结果为黑色矩形

Saving canvas to image via canvas.toDataURL results in black rectangle

本文关键字：toDataURL 图像 结果 黑色 色矩 保存 canvas 布保存 通过      更新时间：2023-09-26

我使用Pixi.js并试图将动画的一帧保存为图像。画布。toDataUrl应该工作，但所有我得到的是一个黑色矩形。查看这里的实际示例

我用来提取图像数据和设置图像的代码是: 
            var canvas = $('canvas')[0];
            var context = canvas.getContext('2d');
            $('button').click(function() {
                var data = renderer.view.toDataURL("image/png", 1);
                //tried var data = canvas.toDataURL();
                $('img').attr('src', data);
            })

我知道这个问题已经在SO上被回答了至少5次，但是…

Kaiido提到的将工作，但真正的问题是，画布，当与WebGL一起使用时，默认有2个缓冲区。正在绘制的缓冲区和正在显示的缓冲区。

当你开始绘制到一个WebGL画布，一旦你退出当前事件，例如你的requestAnimationFrame回调，画布被标记为交换这两个缓冲区。当浏览器重新绘制页面时，它会进行交换。您正在绘制的缓冲区与正在显示的缓冲区交换。你现在正在向另一个缓冲区靠拢。该缓冲区被清除。

被清除而不是被单独留下的原因是，浏览器是否实际交换缓冲区或做其他事情取决于浏览器。例如，如果反锯齿是打开的(这是默认的)，那么它实际上不会做交换。它做了一个"解析"。它将你刚刚绘制的高分辨率缓冲区转换为普通分辨率抗混叠副本到显示缓冲区。

所以，为了使它更一致，无论浏览器使用哪种默认方式它总是清除你要绘制的缓冲区。否则你不知道它是1帧旧数据还是2帧旧数据。

设置preserveDrawingBuffer: true告诉浏览器"总是复制，从不交换"。在这种情况下，它不需要清除绘图缓冲区，因为绘图缓冲区中的内容总是已知的。没有交换。

这一切的意义是什么?关键是，如果你想调用toDataURL或gl.readPixels，你需要在同一个事件中调用它们。

例如你的代码可以像这样

var capture = false;
$('button').click(function() {
   capture = true;
});
function render() {
  renderer.render(...);
  if (capture) {
    capture = false;
    var data = renderer.view.toDataURL("image/png", 1);
    $('img').attr('src', data);
  }
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

在这种情况下，因为你调用toDataURL在相同的javascript事件，因为你渲染到它，你会得到正确的结果总是不管是否preserveDrawingBuffer是真或假。

如果你正在编写不经常渲染的应用你也可以这样做

$('button').click(function() {
   // render right now
   renderer.render(...);
   // capture immediately
   var data = renderer.view.toDataURL("image/png", 1);
   $('img').attr('src', data);
});

默认preserveDrawingBuffer为false的原因是因为交换比复制快，所以这允许浏览器尽可能快地运行。

[注]

虽然这个答案是被接受的，但请务必阅读下面@gman的答案，它确实包含了一种更好的方法。

你的问题是你正在使用webGL上下文，然后你需要将webGL上下文的preserveDrawingBuffer属性设置为true，以便能够调用toDataURL()方法。

或者，您可以通过使用CanvasRenderer Class

强制pixi使用2D上下文。
相关文章：