嵌套画布另存为单个图像

Nested canvas saving as a single image

本文关键字：单个 图像 另存为 嵌套      更新时间：2024-05-26

我有一个名为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);

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

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

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

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

var dataURL = ctx.canvas.toDataURL();

另外请注意，除非浏览器不支持canvas，否则不会显示canvas的IIRC子级（目前只有真正旧的浏览器）

相关文章：