如何在角度中使用织物js将两个画布（外部和内部）保存为png

Posted 2023-03-25

【中文标题】如何在角度中使用织物js将两个画布（外部和内部）保存为png

【英文标题】：How to save two canvas(outer and inner) as png using fabric js in angular

【发布时间】：2021-06-22 08:53:22

【问题描述】：

当我保存画布时，它只保存外部画布并忽略内部画布

 //html

<button type="button" (click)="save()">save</button>
<div class="outercanvas">
      <canvas id="outercanvas"   ></canvas>  
</div>
<div class="outerCanvas">
    <canvas id="outerCanvas"   ></canvas>  
</div>

//ts code

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

【参考方案1】：

Ofc，因为您从来没有像保存外层画布那样要求它保存内层画布。

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

要单独保存内部画布，您可以为内部画布调用相同的内容。

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

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

获取内部画布的输出 使用fabric.Image.fromURL()将该图像放在外层画布上 保存外部画布的输出 从外层画布中删除图像，所以它会像，图像永远不存在

注意：在第二步中，您必须定位图像，如果您想使用 canvas.centerObject(img); 将其放置在中心，请使用 left 和 top 属性。