Heim > Fragen und Antworten > Hauptteil
Ich habe mehrere Leinwände, die als Ebenen verwendet werden.
canvas c1 = background image. canvas c2 = charactor image. canvas c3 = item image.
Mein Quellcode lautet wie folgt.
Stellen Sie drei Leinwände am selben Ort auf.
<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; }
Jetzt möchte ich diese Leinwände als JPG exportieren.
Ich habe Quellcode, der eine Leinwand exportieren kann, aber ich möchte ein JPG aus drei Leinwänden exportieren.
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(); }
P粉1667793632024-04-04 19:20:54
这是可能的,但更好的方法是使用 1 个画布并将所有内容绘制到那里。
在这里,我们创建一个虚拟画布,循环遍历所有画布以将数据绘制到其上,然后保存该画布生成的图像。
//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(); }