Search code examples
canvaspngrenderhighcharts

Render Highcharts canvas as a PNG on the page

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.

Solution

  • Here's a server side solution based on PhantomJS. You can use JSONP to make a cross domain call to image.vida.io.

    http://image.vida.io/

    Your chart/visualization need to be accessible from outside. You can pass credential to the URL.

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

    Then you can display image with img tag:

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

    It works across browser.