Highchart图转img图片(svg)_hgt转img-CSDN博客

本文链接：https://blog.csdn.net/weixin_38981413/article/details/105887083

需求:svg转img(邮件发送highcharts可视化图表给用户查看 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./highcharts.js"></script>
<body>
    <div class="container" id="container">

    </div>
    <script>
        var chart = Highcharts.chart('container', {
        plotOptions:{
            series:{
                //动画时间设置:false
                animation:false
            }
        },
		chart:{
            events:{
                load:function(e){
                    var curDiv=this.container;
                    //svg标签转img标签,某些邮件客户端支持img_svg,不支持svg标签
                    var svg=curDiv.innerHTML;
                    var imgStr="<img src=\"data:image/svg+xml;base64,"+utoa(svg)+"\" >";
                    curDiv.outerHTML=imgStr;
                }
            },
            
        },
		series: [{
				name: '安装，实施人员',
				data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
		}],
});
    
        // 使用utf-8字符集进行base64编码
function utoa(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}
// 使用utf-8字符集解析base64字符串 
function atou(str) {
    return decodeURIComponent(escape(window.atob(str)));
}
    </script>
</body>
</html>

echarts不采纳原因:1.邮件客户端不支持js脚本,canvas标签渲染;

2.后台通过JBrowserDriver爬取页面,不支持echarts的图片渲染完时事件:因此转不了图片

echarts转图片:

//echart转图片
var snapshotImage = new Image();
document.body.append(snapshotImage);
chart.on('finished', function () {
    snapshotImage.src = chart.getDataURL();
});

当然echarts也支持svg渲染器,我没进行测试
    //import 'zrender/lib/svg/svg';
    // 使用 SVG 渲染器
    var chart = echarts.init(containerDom, null, {renderer: 'svg'});