在页面上将 Highcharts 画布渲染为 PNG

Posted 2023-02-22

【中文标题】在页面上将 Highcharts 画布渲染为 PNG

【英文标题】：Render Highcharts canvas as a PNG on the page

【发布时间】：2012-02-18 04:36:51

【问题描述】：

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

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

我找到了这个：Capture HTML Canvas as gif/jpg/png/pdf?，但代码似乎没有向文档呈现图像。

【问题讨论】：

最近版本的 highcharts 使用 SVG 而不是 HTML5 画布呈现：highcharts.com/component/content/article/2-news/…

【参考方案1】：

Here's a hack 如果您一心想要使用 HighCharts。它使用canvg 将 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+'"/>');

【讨论】：

这太棒了；假设要求在 POS Internet Explorer 中运行此功能太过分了。它不会在 Outlook 中呈现（当然）。再次感谢您的帮助。

我在想也许我可以使用一种有点笨拙的方法将生成的 PNG 文件保存到服务器，然后运行一个 cron 脚本来访问页面，以便定期保存更​​新的图像，然后我只会从服务器加载一个带有图像的不同页面。我发现了这个：***.com/questions/7291183/decoding-a-canvas-todataurl——但那里没有关于如何传递 canvas.toDataURL(); 的说明。输出到 php 变量并保存一个服务器

我正在使用 Angular，在转换时出现错误，请您帮忙***.com/questions/19245398/…

【参考方案2】：

我知道这是一个老问题了，但由于它在 Google 搜索结果中为我排名第一，我认为值得一提的是 Highcharts 现在 natively supports a server-side image generation script 并且效果很好。

【讨论】：

太棒了....原谅我的天真，但是否有某种类型的指导指南来设置它？看起来这更像是对该工具的解释，而不是设置指南，但也许我遗漏了一些明显的东西。

看起来核心文档中还没有一节。但是，我使用我提到的页面作为指南，发现它非常容易。所有组件基本上都是免配置的，并且开箱即用。

如果您想了解更多操作方法，我还建议您与 highcharts 支持人员交谈 - 他们反应迅速。

你是对的；在让 PhantomJS 吐出图像方面非常容易设置。如果他们有一些关于页内渲染等的文档，那就太好了。感谢您的帮助！

【参考方案3】：

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

http://image.vida.io/

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

http://image.vida.io/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas

然后就可以用img标签显示图片了：

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

它可以跨浏览器工作。

【参考方案4】：

使用来自“Render charts on the server”（来自jkraybills answer）的信息，我创建了这个最小示例，使用 Ajax 来获取尚未呈现的图表图像，并将其显示在 img -标签。

HTML：

<img id="chart" style="width: 600px;" />

javascript：

// Regular chart options
var options = 
    title: 
        text: 'My chart'
    
    ...


//URL to Highcharts export server
var exportUrl = 'http://export.highcharts.com/';

//POST parameter for Highcharts export server
var object = 
    options: JSON.stringify(options),
    type: 'image/png',
    async: true
;

//Ajax request
$.ajax(
    type: 'post',
    url: exportUrl,
    data: object,
    success: function (data) 
        // Update "src" attribute with received image URL
        $('#chart').attr('src', exportUrl + data);
    
);

如this JSFiddle demonstration。

POST 参数的其余部分（width、callback...）为in the documentation。

【讨论】：

您好，感谢您提供此解决方案，它就像一个魅力。是否可以将在浏览器中直接呈现的图像保存到服务器？ THX 欢呼

谢谢。这帮助很大。