Jak mogę zapisać plik obrazu wygenerowany przez tag canvas z plikiem heatmap.js?

Question

Jak mogę zapisać płótno heatmap.js generowane jako obraz?

Testowałem z toDataURL(), ale nie mogę.

Zapisz na serwerze.

Answer 1

Na czym polega problem?

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

wydawało się działać dobrze

Answer 2

Jak garmur skomentował here, można po prostu umieścić adres URL danych jako źródło dla elementu img, na przykład tak:

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

ze związkiem Znacznik HTML podobny do tego:

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

Następnie zdjęcie e będzie zawierało (przynajmniej w Chrome robi) wersję PNG tego, co było na canvas w momencie generowania adresu URL danych.

Na marginesie: są one faktycznie nazywane data URI, a nie adresami URL, ale funkcja javascript jest w rzeczywistości .toDataURL(). Dziwne rzeczy.