前段時間參與開發這樣的一個系統，負責前端設計開發，使用人員提出需要在郵件發送的時候自動獲取這些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上的實例。