HTML Canvas层叠导出：多Canvas合并为单JPG教程

<div class="canvas-wrap">
  <canvas class="canvas" id="c1" width="600" height="500"></canvas>
  <canvas class="canvas" id="c2" width="600" height="500"></canvas>
  <canvas class="canvas" id="c3" width="600" height="500"></canvas>
</div>

.canvas-wrap{
  width: 600px;
  height:500px;
  max-width: 100%;
  position: relative;
  padding: 0;
  box-sizing: content-box;
  border: 1px solid #ccc; /* 方便观察 */
}
.canvas{
  position: absolute;
  left:0;
  top:0;
  border: 0;
  max-width:100%;
  box-sizing: content-box;
  padding: 0;
  margin: 0;
  /* 示例：为不同Canvas绘制内容以区分 */
  /* background-color: rgba(255,0,0,0.2); */
}

// 示例：在Canvas上绘制一些内容以便观察效果
document.addEventListener('DOMContentLoaded', () => {
    const c1 = document.getElementById('c1');
    const ctx1 = c1.getContext('2d');
    ctx1.fillStyle = 'blue';
    ctx1.fillRect(50, 50, 200, 100);
    ctx1.font = '30px Arial';
    ctx1.fillStyle = 'white';
    ctx1.fillText('背景层', 70, 100);

    const c2 = document.getElementById('c2');
    const ctx2 = c2.getContext('2d');
    ctx2.fillStyle = 'green';
    ctx2.arc(300, 250, 80, 0, Math.PI * 2);
    ctx2.fill();
    ctx2.font = '30px Arial';
    ctx2.fillStyle = 'white';
    ctx2.fillText('角色层', 270, 260);

    const c3 = document.getElementById('c3');
    const ctx3 = c3.getContext('2d');
    ctx3.fillStyle = 'yellow';
    ctx3.fillRect(400, 350, 150, 70);
    ctx3.font = '30px Arial';
    ctx3.fillStyle = 'black';
    ctx3.fillText('物品层', 420, 395);
});


/**
 * 将多个Canvas合并并导出为一张JPG图片。
 */
function exportCombinedCanvasesAsJpg() {
  // 存储所有需要合并的Canvas元素
  const canvasIds = ['c1', 'c2', 'c3'];
  const sourceCanvases = canvasIds.map(id => document.getElementById(id));

  // 检查是否有Canvas被找到，并确保它们有相同的尺寸
  if (sourceCanvases.length === 0 || !sourceCanvases[0]) {
    console.error("未找到任何Canvas元素或第一个Canvas不存在。");
    return;
  }

  const baseWidth = sourceCanvases[0].width;
  const baseHeight = sourceCanvases[0].height;

  // 创建一个临时的离屏Canvas，用于合并所有内容
  const tempCanvas = document.createElement("canvas");
  tempCanvas.width = baseWidth;
  tempCanvas.height = baseHeight;
  const tempCtx = tempCanvas.getContext('2d');

  // 遍历所有源Canvas，将其内容绘制到临时Canvas上
  // 绘制顺序决定了图层叠加的顺序，通常是背景在前，前景在后
  sourceCanvases.forEach(canvas => {
    // 确保Canvas尺寸一致性，避免绘制变形
    if (canvas.width !== baseWidth || canvas.height !== baseHeight) {
        console.warn(`Canvas ${canvas.id} 的尺寸与基准Canvas不一致，可能导致绘制问题。`);
        // 可以选择在这里调整绘制尺寸，或跳过此Canvas
    }
    tempCtx.drawImage(canvas, 0, 0, baseWidth, baseHeight);
  });

  // 使用 toDataURL 方法将临时Canvas内容导出为JPG图片数据
  // 第二个参数 'image/jpeg' 指定图片格式
  // 第三个参数 0.85 指定JPG图片的质量（0到1之间，1为最高质量）
  const dataURL = tempCanvas.toDataURL('image/jpeg', 0.85);

  // 创建一个临时的<a>元素来触发下载
  const a = document.createElement('a');
  a.href = dataURL;
  a.download = 'combined_image.jpg'; // 指定下载文件名
  document.body.appendChild(a); // 必须将a元素添加到DOM中才能触发click
  a.click(); // 模拟点击下载链接
  document.body.removeChild(a); // 下载完成后移除临时a元素
}

// 示例：添加一个按钮来触发导出功能
// <button onclick="exportCombinedCanvasesAsJpg()">导出合并JPG</button>