How To Save Two Canvas(outer And Inner) As Png Using Fabric Js In Angular
while i save canvas it only saves outer canvas and ignores inner canvas //html
Solution 1:
Ofc because you never asked it to save the innercanvas just like you did for outercanvas.
save(){
window.open(this.canvas.toDataURL('png'));
}
To save inner canvas as separately you can call same for inner canvas.
save(){
window.open(this.canvas.toDataURL('png')); //outercanvaswindow.open(this.canvas1.toDataURL('png')); //innercanas
}
If you want to save both canvases in one image then follow below steps
- Take output of inner canvas
- Place that image over outercanvas using
fabric.Image.fromURL() - Save the output of outer canvas
- Remove the image from outercanvas, so it will be like, image never exist
Note: In 2nd step you have to position the image, use left and top property for or that, if you want to place it in center using canvas.centerObject(img);
Post a Comment for "How To Save Two Canvas(outer And Inner) As Png Using Fabric Js In Angular"