如何保存两个画布(外部和内部)为PNG使用织物js的角度

当我保存画布时,它只保存外部画布,而忽略内部画布

 //html

<button type="button" (click)="save()">save</button>
<div class="outercanvas">
      <canvas id="outercanvas"  width="500" height="500"></canvas>  
</div>
<div class="outerCanvas">
    <canvas id="outerCanvas" width="140" height="170" ></canvas>  
</div>

//ts code

canvas  = new fabric.Canvas('outercanvas');
canvas1 = new fabric.Canvas("innerCanvas");
save(){
 window.open(this.canvas.toDataURL('png'));
}

解决方案

Ofc,因为您从未要求它像保存外部Canvas那样保存内部Canvas。

save(){
 window.open(this.canvas.toDataURL('png'));
}

若要将内部画布另存为单独,可以对内部画布调用相同的方法。

save(){
 window.open(this.canvas.toDataURL('png')); //outercanvas
 window.open(this.canvas1.toDataURL('png')); //innercanas
}

如果您要将两个画布保存在一个图像中,请按照以下步骤操作

  1. 获取内部画布的输出
  2. 使用fabric.Image.fromURL()将图像放置在外层画布上
  3. 保存外部画布的输出
  4. 将图像从外部画布中删除,这样就像图像永远不存在

注意:在第二步中,如果要使用canvas.centerObject(img);

将图像放置在中心位置,则必须使用Left和top属性或

相关文章