suchen

Heim  >  Fragen und Antworten  >  Hauptteil

So exportieren Sie JPG-Dateien aus mehreren Leinwänden

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粉301523298P粉301523298228 Tage vor493

Antworte allen(1)Ich werde antworten

  • P粉166779363

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

    Antwort
    0
  • StornierenAntwort