I have multiple canvas, these canvas are used as layers.
canvas c1 = background image.
canvas c2 = charactor image.
canvas c3 = item image.
My source code is like this below.
set three canvas at the same place.
<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;
}
Now, I want to export these canvases as one jpg.
I have source code which can export one canvas, but I want to export one jpg from three canvas.
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();
}
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();
}