Javascript 使用highcharts svg生成的破损图像

我试图从本地服务器生成图表的映像（我已经在上面安装了highcharts）

下面是代码

var chart = Highcharts.charts[i];
                var render_width = chart.chartWidth;
                var render_height = chart.chartHeight;

                // Get the cart's SVG code
                var svg = chart.getSVG({
                    exporting: {
                        sourceWidth: chart.chartWidth,
                        sourceHeight: chart.chartHeight
                    }
                });

                // Create a canvas
                var canvas = document.createElement('canvas');
                canvas.height = render_height;
                canvas.width = render_width;
                document.body.appendChild(canvas);

                // Create an image and draw the SVG onto the canvas
                var image = new Image;
                image.onload = function() {
                    canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
                    console.log(image.src);
                    afterPlotExport(); 
                };
                image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
}

当我尝试在onload（）函数中登录时，我希望看到一个base64字符串。但是当我将它复制粘贴到在线base64到图像转换器时，生成的字符串显示为损坏的图像

---

如果您能提供有关图像为何会出现损坏的任何帮助，我们将不胜感激。

我认为您混淆了图像文件和SVG，SVG是一种用于描述矢量图像的XML派生格式。查看解码的

窗口。btoa（svg）

（或者只是

svg

），您会发现可读的文本。当我尝试在onload（）中记录image.src时，请参考以下小提琴函数我得到一个base64字符串，它被在线转换器转换成一个图像可能的副本你能仔细检查代码并建议我哪里出错了吗？我正确地看到了图像，当我从日志中复制时，我通过粘贴在这里看到了它