C# 利用 NReco.ImageGenerator透過WEB API 將HTML轉換為圖片輸出

摘要: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

 

 

 

參考連結

HTML to Image Generator for .NET

NReco.ImageGenerator doc

實作取得網頁預覽縮圖,透過wkhtmltoimage技巧