如何保存两个画布(外部和内部)为PNG使用织物js的角度 [英] How to save two canvas(outer and inner) as png using fabric js in angular

问题描述

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

 //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属性或

这篇关于如何保存两个画布(外部和内部)为PNG使用织物js的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！