在沒有瀏覽器可用的環境下將 <table> 區塊內容轉成圖片儲存的方式

php html laravel

Allenci 2019-03-06 10:24:28 ‧ 2266 瀏覽

分享至

在工作上遇到這樣的需求但是目前尚未找到適合的解決辦法，所以上來請教各位先進。

※ 使用框架：laravel 5.7
※ server : ubuntu
※ 問題描述：
有一個view的內容是透過controller傳資料去湊出畫面，當中有一個...區塊，但礙於過去的某些限制，view當中不允許使用，所以決定先將表格區域轉成圖片後再丟圖片path到前面去顯示。

※ 目前狀況：
為解決此問題，目前是使用laravel的view()->render()取得原始資料渲染出的 html 區塊程式碼，但取得之後要如何將這些html轉成圖片這一步不知有什麼套件可以做到此需求。

<?php
    $contents = view('template', ['post_data' => $post_data])->render();
?>

目前是想到用傳到view再呼叫一些JS套件去截取畫面並儲存，但是功能是佈署在ubuntu server，這個做法顯然不可行，不知道各位先進有沒有這方面的研究方向，非常感謝!

<script src="/js/html2canvas.js"></script>
<script src="/js/base64.min.js"></script>
<script src="/js/canvas2image.js"></script>

-- 2019/7/26 更新

功能已經上線2個月了，最後還是決定直接將表格轉成圖片放在頁面上的做法，但是這樣做對RWD不是很妥當就是了。

結果如各財報文章：
https://technews.tw/category/finance/finance-report/

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-03-06 10:57:34

最佳解答

其實搞不太懂為何要限制table的因素。不過這我就不問了。

其實將html轉成圖片的做法。如無很特殊的理由。這樣的做法是最浪費效能也很耗時的方式。
不過倒也不是沒有處理的方式就是了。

一般你要再php處理的話。則要用的技術有兩種。先將html碼轉成pdf後，再從pdf轉成圖片。
如果你能直接找到轉成圖片的方式，大多數都是內置轉換pdf後再轉圖的方式。
原因也很簡單，因為pdf的處理已經有現成的處理模式。如果真的要將html直轉成圖片的情況。
大多數用重繪的處理方式，這樣會很耗時跟效能。

其實你找的js的方式，就是一種重繪的處理。其是產生base64的data格式處理。

php中的html轉pdf的方式有很多種。我給你二個關鍵字「html2pdf」「tcpdf」，建議使用後者。
但pdf要轉成圖就會比較麻煩一點就是了。
因為一般而言，php的繪圖處理元件是gd。可惜的是，gd並無法pdf檔。
所以大多數來說都是利用了Imagick這個元件。
但大多數來說，Imagick的php擴展並非是預設安裝的。所以你得先去安裝其擴展才能在php上使用。

看上面說到這些，你可能就會覺得好麻煩了。

不過如果你要跑js處理的情況下。再沒辦法產生table的預設頁面出來之前。你也無法去處理js的動作。
雖然說山不轉路轉，你可以用另開頁面的方式來生成圖處理，可惜這會造成觀感不佳的問題。

所以，如果說，輸出的table是你可以控管的情況下。我會建議你直接改用div-table的方式。
也就是用div來呈現table
我之前有寫過類似的教學 http://tech.ihstar.com/threads/%E7%94%A8css%E5%B0%87div%E5%8C%96%E6%88%90%E8%A1%A8%E6%A0%BC%E5%8C%96%E8%99%95%E7%90%86.15/
你可以參考看看。

不過，如果是無法變動其原本輸出的view情況下。早前我有曾經碰過這樣的案例。
那就是用文字取代的方式了。來改成div處理。

我上面自已寫的那篇教學，其實就是之前碰到這個案例後。才寫的。

說真的，不太建議用html轉圖的方式。一般來說這樣的方式大多數是用來防copy用的居多。
有些是拿來做教學說明。