Render Highcharts canvas as a PNG on the page

Question

I'm using the HighCharts library to generate some dynamic charts. However, I'd like to render the HighCharts canvas element as a PNG image, such that the user can copy and paste the chart into an email, etc. without having to use the exporting function.

Specifically, I'm trying to create an HTML email template that includes the chart, and want the user to be able to select all > copy/paste into their email client instead of copy/pasting, exporting the image, then finding a way to insert it in the email.

I've found this: Capture HTML Canvas as gif/jpg/png/pdf?, but the code doesn't seem to render an image to the document.

Answer 1

Here's a hack if you have your heart set on using HighCharts. It uses canvg to parse the SVG into a canvas and then converts the canvas to a 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+'"/>');