我有一个用于显示医学图像的画布,我有另一个用于通过绘制形状或线条注释图像的画布。
当我在画布#2上画一条线时,我想在画布#1上复制画线:
var context = canvas1.getContext('2d');
context.drawImage(canvas2,0,0);
但是我的画布#1有一个getcontext('webgl')我不能这样做。
我的意思是如何模拟
drawImage() for getcontext('webgl')?
我真的很感激任何帮助或建议。
问候;
Zohreh
答案 0 :(得分:1)
好吧,您可以使用webgl画布的toDataURL
方法将其转换为图像。然后在2D环境中绘制它。
ctx2D.drawImage(webGLCanvas.toDataURL("image/png"), 0, 0);
在这种情况下,我相信您可能必须在初始化时将webgl画布的preserveDrawingBuffer
属性设置为true。
...getContext("webgl", {preserveDrawingBuffer: true});
答案 1 :(得分:1)
您可以使用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>
答案 2 :(得分:1)
我对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。