Copy CANVAS in image format

Question

Copy CANVAS in image format

Navigation

#1 by (2 votes)

1

I have a design in CANVAS designed with the library of FabricJS , so I need to copy the canvas and return the image but keeping the CANVAS and the Image in the same section of the page. How could I achieve what I want?

HTML

<canvas id="myCanvas" width="400px" height="100px" style="border:solid;">

</canvas>
<img alt="Imagen del Canvas" id="img" width="11" height="12" src="noImg">

ANGULAR / TPYESCRIPT

ngOnInit() {
    this.canvas = new fabric.Canvas('myCanvas', );
    this.canvas.add(new fabric.IText('Bayern Munchen'));
    fabric.Image.fromURL('https://3.bp.blogspot.com/-gunJY3CHi9E/WVDEnsgA7rI/AAAAAAABJzs/oJrbBdyKUToGoBS42ikY6YkWAFTqEGwZgCLcBGAs/s1600/FC%2BBayern%2BMunchen.png', (image) => {
      image.set({
        left: 50,
        top: 50,
      });

      this.canvas.add(image);
    });
  }

html canvas typescript angular

asked by jecorrales 04.07.2018 в 22:26

source

1 answer

Difference of exact hours between Date A and Date B Update UI inside backgroundworker in endless thread with C # and WinForms

score 2 · Accepted Answer

I do not understand why you pass an image to a canvas and then ask how to pass it to the image again (you already have the URL of the image) but here is the code (javascript) for that

var canvas = document.getElementById("myCanvas");
var img    = canvas.toDataURL("image/png");
document["img"].src = img;
// o también puedes hacerlo así
//document.getElementById('img').src = img;
//Como alternativa puedes crear un objeto Image sin tenerlo en el documento html
var imgObject = new Image();
imgObject.src = img;