Question

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

当我在画布＃2上画一条线时，我想在画布＃1上复制画线：

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

但是我的画布＃1有一个getcontext（'webgl'）我不能这样做。

我的意思是如何模拟

  drawImage() for getcontext('webgl')?

我真的很感激任何帮助或建议。

问候;

Zohreh

Answer 1

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

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

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

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

Answer 2

您可以使用2D画布作为屏幕画布，并在绘制任何注释之前更新WebGL画布时将WebGL画布绘制到它。

ctx2D.drawImage(webGLCanvas, 0, 0);
// ctx2D.beginPath()...

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

<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>

Answer 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 })

P.S。或者，您可以在渲染画布后立即制作图像副本。如果是这样，则不需要preserveDrawingBuffer。

如何使用getContext（'webgl'）在画布上复制另一个画布数据？

3 个答案: