Dompdf將畫布轉換為pdf

Question

我正在嘗試使用填充了canvas元素的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>

Answer 1

DomPDF是一個HTML到DOM到PDF解析器，而不是一個完整的Web瀏覽器。

事情必定並不總是按預期工作，並且渲染可能存在差異。

如果畫布就像你提供的示例一樣簡單，則無需使用javascript - 只需將其保存為包含<img src=""/> png

如果在畫布上生成的圖片更復雜並且依賴於傳遞給視圖的$data - 可能就是這種情況 - 那么您仍然可以選擇使用PHP來生成SVG（查看內聯PHP或在控制器中傳遞並傳遞與$data ）。

如果SVG不是一個選項，那么您可以使用PHP GD（或其他庫）生成圖像並將其保存在臨時位置（並將文件包含在src="path/to/file.png" ）或轉換圖像到數據URI並將其嵌入視圖中。

就個人而言，作為一個經驗法則，我不會在視圖中使用比簡單的CSS和舊的純HTML更復雜的東西