如何使用 getContext('webgl') 在画布上复制另一个画布的数据？答案

【问题标题】：how to copy another canvas's data on the canvas with getContext('webgl')?如何使用 getContext('webgl') 在画布上复制另一个画布的数据？
【发布时间】：2013-11-08 18:09:42
【问题描述】：

我有一个用于显示医学图像的画布，还有一个用于通过绘制形状或线条来注释图像的画布。

当我在画布#2 上画一条线时，我想在画布#1 上复制画线，如下所示：

  var context = canvas1.getContext('2d');
  context.drawImage(canvas2,0,0);

但是因为我的 canvas#1 有一个 getContext('webgl') 我不能这样做。

我的意思是如何模拟

  drawImage() for getcontext('webgl')?

非常感谢任何帮助或建议。

问候；

Zohreh

【问题讨论】：

标签： javascript html canvas webgl

【解决方案1】：

好吧，您可以使用 webgl 画布的 toDataURL 方法将其转换为图像。然后在 2d 上下文中绘制它。

ctx2D.drawImage(webGLCanvas.toDataURL("image/png"), 0, 0);

在这种情况下，我相信您可能必须在初始化 webgl 画布时将其 preserveDrawingBuffer 属性设置为 true。

...getContext("webgl", {preserveDrawingBuffer: true});

【讨论】：

感谢您的回答，但我完全需要 Vice Versa。我想使用 contex('webgl') 将图像复制到画布。
对不起，我完全搞错了。它有点复杂，在这种情况下，您必须通过 toDataURL 获取 2D 画布图像，并将其用作正方形平面上的纹理，并在 openGL 上下文中绘制它，可能使用正交投影矩阵。但我不喜欢 OpenGL 的东西，所以我无法真正帮助你 =/
我在尝试将 webgl 复制到 2d 时得到空图像。

【解决方案2】：

您可以使用 2D 画布作为屏幕画布，并在更新 WebGL 画布时在其上绘制 WebGL 画布，然后再绘制任何注释。

drawWebGLStuff(webGLCtx);

// Copy image data of WebGL canvas to 2D canvas.
// This should be done right after WebGL rendering,
// unless preserveDrawingBuffer: true is passed during WebGL context creation,
// since WebGL will swap buffers by default, leaving no image in the drawing buffer,
// which is what we want to copy.
ctx2D.drawImage(webGLCanvas, 0, 0);

drawAnnotations(ctx2D);

（注释可以从形状列表中呈现每一帧或绘制到另一个屏幕外画布，然后将其绘制到类似于 WebGL 画布的主（屏幕上）画布。）

或者你可以在页面上简单的layer the canvases绝对定位和z-index：

<div style="position: relative;">
   <canvas id="layer1" width="100" height="100" 
       style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
   <canvas id="layer2" width="100" height="100" 
       style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

【讨论】：

这会导致复制空图像
@MichaelKlishevich 我更新了我的答案以提及代码顺序/preserveDrawingBuffer 要求

【解决方案3】：

我在使用 Emscripten 时遇到了类似的问题，需要将 WebGL 画布复制到另一个空画布上。我使用了这段代码，但屏幕为空。

var sourceCanvasWebGL = document.getElementById( "canvas" );
var destinationCanvas = document.getElementById( "canvasCopy" );
var destinationCanvasContext = destinationCanvas.getContext('2d');
destinationCanvasContext.drawImage(sourceCanvasWebGL, 0, 0);

在谷歌搜索 (Saving canvas to image via canvas.toDataURL results in black rectangle) 之后，我发现因为 WebGL 在绘制时使用了 2 个缓冲区，所以我正在复制旧缓冲区的内容为空。

通过在用于制作 WebGL 绘图的代码中设置 preserveDrawingBuffer: true 解决了问题。

sourceCanvasWebGL.getContext("webgl2", { preserveDrawingBuffer: true })

附：作为替代方案，您可以在渲染画布后立即制作图像副本。如果是这样，您不需要 preserveDrawingBuffer。

【讨论】：