javascript - 嵌套 Canvas 保存为单个图像

Question

我有一个名为 glCanvas 的 Canvas 元素。我想在其中附加一些文字。 glCanvas 有一个 webGL 渲染上下文，所以 getContext('2d') 不起作用。因此，我创建了一个新的 2d Canvas 并将其作为 glCanvas 的子对象:

    var Glcanvas = document.getElementById("glCanvas");


    var canvas = document.createElement('canvas');
    canvas.setAttribute("id","canvas");
    canvas.width="512";
    canvas.height="512";
    Glcanvas.appendChild(canvas);

    var ctx = canvas.getContext('2d');
    var text = "element";//overlay.elementIDs[i];

    ctx.beginPath();
    ctx.clearRect(0,0,300,300);
    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,300,300);

    ctx.fillStyle = 'rgba(255,0,0,255)';
    ctx.lineWidth = 2.5;
    ctx.strokeStyle = 'red';
    ctx.save();
    ctx.font = 'bold 80px Verdana';

    var leftOffset = ctx.canvas.width/2;
    var rightOffset = ctx.canvas.height/2;
    ctx.strokeText(text,leftOffset,rightOffset);
    ctx.fillText(text,leftOffset,rightOffset);
    ctx.save();

稍后我尝试将我的 glCanvas 保存到图像上。

    var imageUrl = glCanvas.toDataURL('image/jpeg', 1.0);

    var pom = document.createElement('a');
    pom.setAttribute('href', imageUrl);
    pom.setAttribute('download', 'image_C' + cameraIndex + '.jpg');

    document.body.appendChild(pom);

    pom.click();

    document.body.removeChild(pom);

在这里，我创建的文本没有被保存。我如何确保它们都得到保存？

Answer 1

我认为您只是想将 WebGL Canvas 绘制到 2d Canvas 中。

ctx = ctx.getContext("2d");
ctx.drawImage(glCanvas, imageX, imageY);
ctx.fillText("sometext", textX, textY);

现在你可以得到二维 Canvas 的截图

var dataURL = ctx.canvas.toDataURL();

另请注意，除非浏览器不支持 Canvas (此时只有真正的旧浏览器)，否则 Canvas 的 IIRC 子项不会显示