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();
} 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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(); }