Dompdf将画布转换为pdf

Question

I'm trying to print a PDF with Dompdf filled with canvas elements.

I can include and print png images with no problem but when trying to include a canvas and then convert it to a png it just won't display it in the exported PDF (no broken image, etc).

What to do?

It is a Codeigniter project:

Loading view in controller with Dompdf:

$this->load->library('pdf');
$this->pdf->load_view('print_pdf', $data);
$this->pdf->render();
$this->pdf->stream("new_pdf_file.pdf");

View to be printed:

<!doctype and so on..>

<canvas id="myCanvas" width="578" height="200"></canvas>

<script>
   context.beginPath();
   context.moveTo(170, 80);
   context.bezierCurveTo(130, 100, 130, 150, 230, 150);
   context.closePath();
   context.lineWidth = 5;
   context.fillStyle = '#8ED6FF';
   context.fill();
   context.strokeStyle = '#0000ff';
   context.stroke();

   var canvas = document.getElementById("myCanvas");
   var img = canvas.toDataURL("image/png");

   $(document).ready(function() {
      $('<img />', { 
         src: img
      });
      img.appendTo($('#testDiv'));
   });
</script>

<div id="testDiv">

</div>

<../html>

Answer 1

DomPDF is a HTML to DOM to PDF parser not a full fledged web browser.

Things are bound to not always work as intended and there may be differences in rendering.

If the canvas would be as simple as in the example you've provided there is no need to make it with javascript - just save it as png an include with <img src=""/>

If the picture generated on the canvas is more complicated and is dependent on the $data passed to view - which is probably the case - then you still have an option to use PHP to generate SVG (either view inline PHP or in the controller and passed with $data ).

If SVG is not an option then you can use PHP GD (or other library) to generate the image and either save it in temporary location (and include the file in src="path/to/file.png" ) or transform the image to data URI and embed it in the view.

Personally, as a rule of thumb I wouldn't use anything more complex than a simple CSS and old plain HTML in the view