如何将多个Canvas图层导出为单张JPG图片？

现有场景 #

我有三个作为图层使用的Canvas：

canvas c1 = 背景图
canvas c2 = 角色图
canvas c3 = 物品图

已通过以下代码将三个Canvas定位在同一位置：

HTML结构 #

<div class="canvas-wrap">
  <canvas class="canvas" id="c1"></canvas>
  <canvas class="canvas" id="c2"></canvas>
  <canvas class="canvas" id="c3"></canvas>
</div>

CSS样式 #

.canvas-wrap{
  width: 600px;
  height:500px;
  max-width: 100%;
  position: relative;
  padding: 0;
  box-sizing: content-box;
}
.canvas{
  position: absolute;
  left:0;
  top:0;
  border: 0;
  max-width:100%;
  box-sizing: content-box;
  padding: 0;
  margin: 0;
}

现有导出单个Canvas的代码，但需要将三个Canvas合并导出为单张JPG：

function saveCanvas(canvas_id)
{
    var canvas = document.getElementById("c1");
    var a = document.createElement('a');
    a.href = canvas.toDataURL('image/jpeg', 0.85);
    a.download = 'download.jpg';
    a.click();
}

解决方案：合并图层后导出 #

创建一个临时Canvas，将三个图层按顺序绘制到这个画布上，再导出临时画布即可。代码如下：

function saveCombinedCanvas() {
    // 获取三个图层Canvas
    const c1 = document.getElementById("c1");
    const c2 = document.getElementById("c2");
    const c3 = document.getElementById("c3");
    
    // 创建临时Canvas，尺寸和图层一致
    const tempCanvas = document.createElement("canvas");
    const ctx = tempCanvas.getContext("2d");
    tempCanvas.width = c1.width;
    tempCanvas.height = c1.height;
    
    // 按图层顺序绘制（背景→角色→物品，顺序不能错）
    ctx.drawImage(c1, 0, 0);
    ctx.drawImage(c2, 0, 0);
    ctx.drawImage(c3, 0, 0);
    
    // 导出为JPG并下载
    const a = document.createElement('a');
    a.href = tempCanvas.toDataURL('image/jpeg', 0.85);
    a.download = 'combined.jpg';
    a.click();
}

说明 #

• 绘制顺序要和图层显示顺序一致，保证上层内容覆盖下层
• 临时Canvas的尺寸要和原Canvas的width/height属性值一致（而非CSS样式的宽高），避免导出图片变形

内容的提问来源于stack exchange，提问作者whitebear