如何在 angular 中使用 fabric js 将两个 canvas（外部和内部）保存为 png

Question

虽然我保存 canvas 它只保存外部 canvas 而忽略内部 canvas

 //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'));
}

Answer 1

Ofc，因为您从未要求它保存内部canvas，就像您对外部canvas所做的那样。

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

要单独保存内部 canvas，您可以为内部 canvas 调用相同的方法。

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

如果您想要将两个canvas都保存在一张图片中，请按照以下步骤操作

取内部的输出canvas
使用 fabric.Image.fromURL()
保存外canvas
从外部删除图像canvas，这样图像就好像永远不存在

注意：在第 2 步中，您必须定位图像，使用左侧和顶部属性或那个，如果您想将其放置在中央，请使用 canvas.centerObject(img);

如何在 angular 中使用 fabric js 将两个 canvas（外部和内部）保存为 png

How to save two canvas(outer and inner) as png using fabric js in angular

javascript

canvas

fabricjs

angularjs

typescript