Dompdf将画布转换为PDF

Question

我正在尝试使用Dompdf打印一个包含画布元素的PDF文档。

我可以轻松地包含和打印png图片，但是当尝试包含一个画布并将其转换为png时，它就无法在导出的PDF中显示（没有损坏的图像等）。

怎么办？

这是一个Codeigniter项目：

在控制器中使用Dompdf加载视图：

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

需要打印的视图：

<!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>

- Markus

Answer 1

DomPDF是一个将HTML转换为DOM到PDF的解析器，而不是一个完整的网络浏览器。

事情往往不会总是按照预期工作，可能会存在渲染差异。

如果画布像你提供的示例一样简单，那么就没有必要使用JavaScript制作它 - 只需将其保存为png并使用<img src=""/>包含即可

如果在画布上生成的图片更复杂，并且依赖于传递给视图的$data - 这可能是情况 - 那么您仍然可以选择使用PHP生成SVG（无论是内联PHP还是在控制器中生成并通过$data传递）。

如果SVG不是选项，则可以使用PHP GD（或其他库）生成图像，并将其保存在临时位置（并在src="path/to/file.png"中包含文件）或将图像转换为数据URI并嵌入视图中。

个人而言，我不会在视图中使用比简单CSS和旧的纯HTML更复杂的东西。

- Michal Bieda