自動化郵件報告平臺-郵件發送highchart圖表

前段時間參與開發這樣的一個系統，負責前端設計開發，使用人員提出須要在郵件發送的時候自動獲取這些highchart圖表數據，並顯示在平臺頁面上，當發送郵件的時候也把圖表附帶在郵件中。

highchart是一個比較強大的圖表組件，這個圖表組件以svg方式渲染在網頁上，渲染完畢後會在網頁中添加了svg元素，能夠經過dom 或者jQuery 把svg內容單獨抽取出來，此svg元素也可以在網頁上直接顯示，以下圖所示。 

可是，在郵箱環境下，這些svg元素不必定能展現在郵件裏面，各類郵箱環境不一樣，在手機端郵件和pc端郵件環境也有影響，顯然，這不是咱們想要的效果。

咱們能夠經過把svg轉爲圖片格式傳到後臺處理，或者把svg轉爲base64直接添加到郵件中裏面，等方式去處理，固然處理方式確定不少，可是離不開svg轉圖片格式的過程。 
最後咱們使用base64的方式附帶在郵件中，緣由以下。 
1.圖表大小比較小。 
2.平臺運行在內部服務器中，不採用把svg轉爲圖片格式單獨放在外部服務器中，避免把信息暴露在外部，同時也避免了增長外部服務器的措施。

最後問題變爲如何把svg轉爲base64的方式顯示在網頁上。

咱們能夠經過使用 canvg.js 把svg渲染在canvas上，咱們知道canvas有一個函數toDataURL可以把canvas上顯示的內容保存爲base64，因此之後咱們發送郵件的時候把base64圖片追加到郵件正文中顯示就能夠了。

TIP： 
anvag.js上遇到的小坑：做者官網版本的canvag把含有中文的圖表轉爲圖片格式後中文亂碼，建議使用附件附帶的canvg版本。

附件附帶：經過canvg.js把svg渲染在canvas上的實例。

http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244545
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244541
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244538
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244527
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244528
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244529
http://bbs.bxzc123.com/forum.php?mod=viewthread&tid=244530