类别：未命名 / 日期：2024-11-04 / 浏览：20 / 评论：0
需求：
项目中大量用到了highchart图表，出于某些需求，需要将highchart图表导出为图片，以便于生成pdf、word等文档。
现有的解决方案：
highchart官方提供的导出方式是将图表数据发回其官网服务器，生成图片后返回，正常情况下系统不会允许使用这种方案。
网上找到一种自建导出服务器的方式来导出图表，大致思想是使用开源项目batik，将组成highchart图表的svg格式数据转换成指定的图片格式（png，jpg……）。但是整个服务很复杂，大概需要引入近19个jar包，单纯为导出图片，总觉得有点不值得……
使用谷歌前端开源工具canvg.js，将svg格式的图像完美转换至canvas中，利用canvas导出图表……
最终解决方案（当然是最后一种）：
研究过highchart的都会注意到，其核心是根据数据配置操作svg格式的图像（svg：一种用xml定义的语言，用来描述二维矢量及矢量/栅格图像，具体请自行百度）。
而html5 canvas可以利用工具canvg.js将svg格式的图像精准转换至canvas画布中……
canvas图像提供了方便的图片转换功能
综上所述，
将highchart图表的svg数据提取出来
用canvg将svg数据转换到canvas中
使用canvas获取图片base64数据……
使用图表数据转换成图片
细节描述：
4、使用图表数据转换成图片
注：1、使用canvg.js需要rgbcolor.js图像颜色相关组件，如果系统中没有，请引入！
2、exporting.js的引入会使系统中图表增加官方默认的图片下载组件，我修改官方的 exporting.js，去除了默认的图片下载组件，保留了getSVG()方法
