问题

我有多个画布，这些画布用作图层。

画布 c1 = 背景图像。
画布 c2 = 角色图像。
画布 c3 = 物品图像。

我的源代码如下所示。

将三个画布放在同一个位置。

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

.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;
}

现在，我想将这些画布导出为一个 jpg 图像。

我有可以导出单个画布的源代码，但我想从三个画布导出一个 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 c1 = background image.
canvas c2 = charactor image.
canvas c3 = item image.

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

.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;
}

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();
}

答案1

得分: 2

这是翻译好的部分：

"这是可能的，但更好的方法是使用一个画布，将所有内容都绘制到那里。

在这里，我们创建一个虚拟画布，循环遍历所有画布以将它们的数据绘制到其中，然后从该画布保存生成的图像。

// 将所有画布存储在数组中，以便稍后遍历它们
const canvasses = [];
['c1', 'c2', 'c3'].forEach(canvasId => {
  canvasses.push(document.getElementById(canvasId));
});

function save() {
  // 创建一个画布，用于绘制所有内容
  const canvas = document.createElement("canvas");
  canvas.width = canvasses[0].width;
  canvas.height = canvasses[0].height;

  // 在这里绘制其他画布
  const ctx = canvas.getContext('2d');
  canvasses.forEach(data => {
    ctx.drawImage(data, 0, 0);
  });

  // 原始保存代码，使用我们创建的虚拟画布
  var a = document.createElement('a');
  a.href = canvas.toDataURL('image/jpeg', 0.85);
  a.download = 'download.jpg';
  a.click();
}
```"

<details>
<summary>英文:</summary>

It *is* possible, but a nicer approach would be to use 1 canvas and draw everything onto there.

Here we create a dummy canvas, loop through all the canvasses to draw their data onto it, then save the resulting image from that canvas.

//store all canvasses in array so we can loop through them later
const canvasses = [];
['c1','c2','c3'].forEach(canvasId => {
canvasses.push(document.getElementById(canvasId));
});

function save(){
//create one canvas to draw everything to
const canvas = document.createElement("canvas");
canvas.width = canvasses[0].width;
canvas.height = canvasses[0].height;

//draw other canvases here
const ctx = canvas.getContext('2d');
canvasses.forEach(data => {
ctx.drawImage(data, 0, 0);
});

//original saving code, using the fake canvas we created
var a = document.createElement('a');
a.href = canvas.toDataURL('image/jpeg', 0.85);
a.download = 'download.jpg';
a.click();
}

</details>