How I can save the image file generated by canvas tag with heatmap.js?

Question

How I can save the canvas heatmap.js generated as an image?

I've been testing with toDataURL (), but I can not.

Save on server.

Answer 1

As garmur commented here , you can just put the data URL as the source for an img element, for example like this:

//assume you have the data URL in variable "url"
document.getElementById("myImage").src=url;

with an HTML tag like this:

<img id="myImage"></img>

Then the image will contain a (at least in Chrome it does) PNG version of what was on the canvas at the time of the data URL generation.

As a side note: they are actually called data URI 's and not URL's, but the javascript function is actually .toDataURL() . Strange stuff.

Answer 2

What's the problem?

var heatmap1 = h337.create({"element":document.getElementById("heatmapArea"), "radius":25, "visible":true});
var url = heatmap1.get("canvas").toDataURL();

seemed to work just fine