Bagaimana untuk mengeksport jpg daripada berbilang kanvas

Question

Saya mempunyai berbilang kanvas yang digunakan sebagai lapisan.

canvas c1 = background image.
canvas c2 = charactor image.
canvas c3 = item image.

Kod sumber saya adalah seperti berikut.

Sediakan tiga kanvas di lokasi yang sama.

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

Sekarang, saya mahu mengeksport kanvas ini sebagai jpg.

Saya mempunyai kod sumber yang boleh mengeksport satu kanvas, tetapi saya mahu mengeksport satu jpg daripada tiga kanvas.

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

Answer 1

Boleh, tetapi cara yang lebih baik ialah menggunakan 1 kanvas dan melukis segala-galanya di sana.

Di sini kami mencipta kanvas maya, melingkari semua kanvas untuk menarik data padanya, dan kemudian menyimpan imej yang dijana oleh kanvas itu.

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