Print what is in a CANVAS HTML tag

Question

Print what is in a CANVAS HTML tag

Navigation

#1 by (0 votes)

4

I'm trying to print the content of a% HTML% tag, so everything goes perfectly, so what I'm doing through the div library is that you can write a text and add an image as shown below:

CONTENT IMAGE

But, when trying to print the content of fabricJS , which ranges from the hello world to the section of div I have found that the content of the canvas does not print it and shows it in white:

PRINT IMAGE

HTML CODE

<div class="card mb-3 shadow p-3 mb-5 bg-white rounded">
      <div class="container" id="print-section">
        ¡Hola Mundo!
        <canvas id="myCanvas" width="400px" height="100px" style="border:solid;">
          Hola Mundo!
        </canvas>
      </div>
      <hr>
      <div class="form-row">
        <div class="col-md-6">
          <button class="btn btn-primary btn-block" (click)="print('printSectionId')">Print</button>
        </div>
        <div class="col-md-6">
          <button class="btn btn-success btn-block" (click)="inciarCanvas()">Etiqueta</button>
        </div>
      </div>
    </div>

TYPESCRIPT / ANGULAR CODE

canvas: any;
  constructor() { }
  print(): void {
    let printContents,
        popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write('
      <html>
        <head>
          <title>Print tab</title>
          <style>
          </style>
        </head>
        <body onload="window.print();window.close()">${printContents}</body>
      </html>'
    );
    popupWin.document.close();
  }

  ngOnInit() {
    this.canvas = new fabric.Canvas('myCanvas', );
    this.canvas.add(new fabric.IText('¡Escribe lo que tu quieras!'));
    fabric.Image.fromURL('https://assets-cdn.github.com/images/icons/emoji/unicode/1f47d.png', (image) => {
      image.set({
        left: 50,
        top: 70,
      });

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

Note: If I press the canvas + ctrl keys, the entire content of the page, including the canvas, is shown and loaded in the canvas.

What can I do to solve this, or what suggestions can you give me to get what I want?

Beforehand, thank you very much!

typescript angular angular5 print

asked by jecorrales 29.06.2018 в 16:49

source

1 answer

Android notifications Query about the web address that you see in the browser bar

score 0 · Accepted Answer

For those who arrive here with the same problem, I leave the solution to print the objects that have been generated with the library FabricJS :

For the solution I used the method of FabricJS with denomination toSVG

rasterizeSVG ()
  {
    let printContents,
        popupWin,
        img;
    printContents = this.canvas.toSVG();
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write('
      <html>
        <head>
          <title>Print tab</title>
          <style>
          </style>
        </head>
        <body onload="window.print();window.close()">${printContents}</body>
      </html>');
    popupWin.document.close();
    return 'data:image/svg+xml;utf8,' + encodeURIComponent(this.canvas.toSVG())
  }

Detail

Then, we make the HTML object equal to the canvas by making the respective call to the SVG conversion method this.canvas.toSVG(); . In short, what we do is convert the content of the canvas tag to a svg format, so when printing, it gets it in the aforementioned format.

In this section of the code we return the image and encode it with an SVG component to give it the respective output.

return 'data:image/svg+xml;utf8,' + encodeURIComponent(this.canvas.toSVG())

Note: If I was wrong in some term, let me know, thank you!