Question

I’ve got an HTML email template that’s using a kludgy process as follows:

1. Pull data from MySQL and put it into a HighCharts chart
2. Convert the HighCharts SVG to canvas using canvg
3. Render the canvas as a Base64 PNG using canvas.toDataURL

All’s well and good, the image shows up fine (except for some quirkiness in Internet Explorer), but here’s the rub:

I’d like users to be able to copy and paste the entire web page into Outlook and send it out as an email. However, Outlook (and a few other clients I’ve tried) won’t receive Base64 PNGs via copy paste — there’s a blank space where the image should be.

Does anyone know of a way to convert the Base64 into a normal PNG such that it can survive the copy/paste? Maybe this requires saving the PNG to server?

Answer 1

I’ve been thinking about this since your last question and I’ve come up with 3 options:

One

1. Stick with what you have.
2. Take the base64 string from the toDataURL, submit it back to the server via AJAX, on the backend convert it to a PNG, store it on server and serve PNG back to the page.

Two

1. Render highcharts SVG on the users browser.
2. Submit that SVG string to your backend server via AJAX call.

3. On the backend, generate a post request (something like described here see Using PHP for POST Request) to the highcharts exporting server at http://export.highcharts.com/. From looking at the highcharts source the request needs to contain the following posted variables:

   filename: png filename
   type: from the plotOptions, the type, line, bar,etc..
   width: the width in pixels of the desired png
   svg: the svg string

4. Get the resulting PNG, save it to your server, serve it normally.

Three

Switch to using the Java Highcharts API. You’d have to get this running on your server. Once you did, though, you could generate your charts entirely on the backend and just serve up the PNG file.