5

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

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

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

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

我的意思是如何模拟

  drawImage() for getcontext('webgl')?

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

问候;

佐雷赫

4

3 回答 3

1

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

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

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

...getContext("webgl", {preserveDrawingBuffer: true});
于 2013-10-30T03:04:14.370 回答
1

我对 Emscripten 有类似的问题，需要将 WebGL 画布复制到另一个空画布。我使用了此代码，但屏幕为空。

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

经过一番谷歌搜索（通过 canvas.toDataURL 将画布保存到图像会导致黑色矩形）我发现因为 WebGL 在绘制时使用了 2 个缓冲区，所以我正在复制带有空内容的旧缓冲区。

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

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

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

于 2020-02-13T14:14:51.547 回答
1

您可以使用 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 画布的主（屏幕上）画布。）

或者您可以简单地在页面上使用绝对定位和分层画布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>
于 2016-12-03T21:50:00.977 回答