摘要:C# 利用 NReco.ImageGenerator 透過WEB API 將HTML轉換為圖片輸出
先說說需求好了,
公司目前有一個專案希望網頁中,
圖跟文可以透過網頁動態產出.
並將此網頁產生為圖片.
剛好就想到之前寫的HTML產PDF<C#MVC 透過Rotativa 將HTML轉PDF>所提供的原生來源
是有提供html to image的功能
所以本篇跟前篇基本上是一樣的,來源都是 wkhtmltopdf 由此出來,
只是不同作者重新包過,讓使用者更方便呼叫使用!
如果在此小弟有甚麼錯誤的地方,也不吝前輩多多指導
此套件來源
http://www.nrecosite.com/html_to_image_generator_net.aspx
有分為付費版與免費版
差異在於完整支援,與範例程式碼與原始法
在此還是以免費版的來做範例嚕
此套件作者有放在NUGET上
所以在此就直接透過NUGET來做安裝此套件
NUGET位置:https://www.nuget.org/packages/NReco.ImageGenerator/
安裝好後會在專案中Bin的資料夾中看到所需的元件與exe檔
NReco.ImageGenerator,
msvcp120.dll,
msvcr120.dll,
wkhtmltoimage.exe
不過實際上我們是可以移動且自定義執行檔名稱的
就是上列紅字列出的部分
接著就看看,此套件提供了哪些方法可以使用嚕
其實提供的設定屬性跟方法,
應該都能滿足我的需求!
似乎是不需要用到付費版的XD
就開始來刻CODE試試嚕
小弟這邊是用MVC5內使用WEB API 2的版本
因為MVC5的專案內已經有內建的樣板,
可以直接拿來測試是否可順利產出圖檔
所以主要還是寫在API內
在範例檔中的\Controllers\API\GenImageController.cs
Controler 內有兩個方法
一是ResponseImg 直接輸出圖檔
二是DownLoadIMG 輸出圖檔提供下載
其實剛剛有提到Bin裡面可以自行搬移的三個檔案
msvcp120.dll,
msvcr120.dll,
wkhtmltoimage.exe
我是自行在專案內新增一個資料夾HtmlToIMG_exe_Path
並將上列三個檔案放入,
且將wkhtmltoimage.exe更名為Customer.exe
接下來就看看輸出結果是不是我們要的嚕
記得要先將Width,Height,Zoom三個設定屬性先註解調
因為我只是測試那些數值是亂輸入的XD
結果輸出是成功的!
直接在網頁上輸出為圖片
那麼接下來
第二個Controler 內DownLoadIMG的方法
希望可以讓使用者直接下載至本機
看看是否也是如我們所預期的
不過記得要正常輸出,
還是要註解掉Width,Height,Zoom三個設定屬性!
如上所說那是為了說明XD亂設定的
能正常輸出提供使用者自定義下載圖片位置了
那麼就看看下載回來的圖是不是正常嚕
看樣子輸出的結果是正確我們所要的
不過目前還有一個方法尚未介紹
GenerateImage 這方法也是提供兩個多載方法
一個是ref stream
一個是回傳byte []
但跟GenerateImageFromFile此方法有甚麼不同
最大差異是在於GenerateImageFromFile可以放入URL的位置
直接將URL讀取回來
但目前有一個問題,就是如果放入html string並不會將CSS套入
所以出來的就只有純文字的部分
如果各位先進有找到直接讀取HTML string可以將CSS呈現出來
也不吝分享
如果小弟找到方法也會在此處做分享
在此處放上範例程式碼:請點我
所有Html to Image的範例皆在專案中的\Controllers\API\GenImageController.cs