嵌套画布另存为单个图像答案

【问题标题】：Nested canvas saving as a single image嵌套画布另存为单个图像
【发布时间】：2015-02-25 19:27:42
【问题描述】：

我有一个名为 glCanvas 的画布元素。我想在上面附加一些文字。 glCanvas 有一个 webGL 渲染上下文，所以 getContext('2d') 不起作用。因此，我创建了一个新的 2d 画布并将其作为 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);

在这里，我创建的文本没有保存。如何确保他们两个都得救？

【问题讨论】：

DOM 元素和画布位图是两个非常独立的东西。您必须将每个位图（来自每个画布）绘制到一个新的（或重复使用其中一个）上。

标签： javascript canvas html5-canvas webgl

【解决方案1】：

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

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

现在您可以获取 2D 画布的屏幕截图

var dataURL = ctx.canvas.toDataURL();

另外请注意，除非浏览器不支持画布，否则画布的 IIRC 子代不会显示（此时只有真正的旧浏览器）

【讨论】：

感谢您的回答，但我有一个小问题。我的问题中没有提到它，因此我把它放在这里：我已经有一些东西正在被绘制到 glCanvas 中。我想给他们文本标签，因此创建了 2d 画布。我有大约 150 个元素，实际上我正在创建 150 个小画布来放置文本标签并将它们添加到 glcanvas。如果我按照你说的方式反转它，我不确定它会如何工作
不清楚你的意思。您的问题是“另存为单个图像”，这听起来像是您想要带有标签的屏幕截图。如果你想要一个简单的截图。将 glCanvas 绘制到 2d-canvas 中，然后在 2d-canvas 上绘制 150 个标签，然后在 2d-canvas 上调用 toDataURL。相反，如果您实际上想显示 150 个标签并且屏幕截图无关紧要，那么请重新编写您的问题。