iT邦幫忙

0

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

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

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

※ 目前狀況:
為解決此問題,目前是使用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/

2 個回答

0
浩瀚星空
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用的居多。
有些是拿來做教學說明。

0
海綿寶寶
iT邦大神 1 級 ‧ 2019-03-06 10:41:56

Google 到兩個,不妨試試看
1.PHP 版本
2.javascript 版本(這個看起來比較可行)

喔~~~那個php版本看起來是不需要用到 Imagick 的感覺。等等下載回來試一下看看。可以拿來做我的站點展示圖片產生的應用。
其實一直很苦腦這個問題。目前用的都是js的版本。

早前想要用遠端更新圖頁的方式都辦不太到。因為不想裝Imagick。

感謝提供了。

我要發表回答

立即登入回答