Canvas 在页面上将Highcharts画布呈现为PNG

我正在使用HighCharts库生成一些动态图表。但是，我希望将HighCharts画布元素呈现为PNG图像，这样用户就可以将图表复制并粘贴到电子邮件中，而无需使用导出功能

具体来说，我正在尝试创建一个包含图表的HTML电子邮件模板，并希望用户能够选择“全部”>“复制/粘贴到其电子邮件客户端”，而不是复制/粘贴、导出图像，然后找到将其插入电子邮件的方法

我发现了：，但代码似乎没有向文档呈现图像。

如果您想使用HighCharts。它使用将SVG解析为画布，然后将画布转换为PNG

chart = new Highcharts.Chart({
    
    chart: {
        renderTo: 'container'
    },
    
    title: {
        text: ''
    },
    
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }],
    
    navigation: {
        buttonOptions: {
            align: 'center'
        }
    }
});

canvg(document.getElementById('canvas'), chart.getSVG())
    
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");

document.write('<img src="'+img+'"/>');

---

我知道这是一个老问题，但由于它在谷歌搜索结果中出现了1，我认为值得一提的是，Highcharts现在运行良好。

这里有一个基于PhantomJS的服务器端解决方案。您可以使用JSONP对image.vida.io进行跨域调用

您的图表/可视化需要可以从外部访问。您可以将凭据传递到URL

然后，您可以显示带有img标签的图像：

<img src="data:image/png;base64, [base64 data]"/>

它可以跨浏览器工作。

根据来自的信息，我使用Ajax创建了这个最小的示例，以获取尚未渲染的图表的图像，并将其显示在img标记中

HTML:

如在

---

POST参数宽度的其余部分，回调。。。是。

最新版本的highcharts是使用SVG而不是HTML5画布呈现的：这太棒了；假设要在POS Internet Explorer中实现这一点要求过高。当然，它不会在Outlook中呈现。再次感谢您的帮助。我在想，也许我可以使用一种有点笨拙的方法，将生成的PNG文件保存到服务器，然后运行cron脚本访问页面，这样更新后的图像就可以定期保存，然后我就可以从服务器加载另一个包含图像的页面。我发现：-但是那里没有关于如何传递canvas.toDataURL的说明；输出到一个PHP变量并将其保存到我正在使用的服务器angular，在转换时我遇到了错误，您能帮我吗。。。。请原谅我的幼稚，但有什么类型的教学指南来设置它吗？看起来这更像是一个工具的解释，而不是一个安装指南，但也许我遗漏了一些显而易见的东西。看起来核心文档中还没有一个章节。然而，我使用了我提到的页面作为指导做什么，并发现它非常容易。所有的组件基本上都是免配置的，而且它可以像广告宣传的那样开箱即用。如果你想了解更多的操作方法，我还建议你与highcharts支持人员联系——他们的响应能力非常强。你说得对；在让幻影吐出图像方面非常容易设置。如果他们有一些关于页面内呈现等的文档就好了。谢谢你的帮助！您好，感谢您提供此解决方案，它的效果非常好。是否可以将浏览器中渲染的图像直接保存到服务器？谢谢。这帮了大忙。