自动化邮件报告平台-邮件发送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