Làm cách nào để lưu tệp hình ảnh được tạo bởi thẻ canvas bằng heatmap.js?

Question

Làm thế nào tôi có thể lưu canvas heatmap.js được tạo dưới dạng hình ảnh?

Tôi đã thử nghiệm với toDataURL(), nhưng tôi không thể.

Lưu trên máy chủ.

Answer 1

Sự cố là gì?

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

dường như chỉ làm việc tốt

Answer 2

Như garmur nhận xét here, bạn có thể chỉ cần đặt URL dữ liệu như là nguồn cho một yếu tố img, ví dụ như thế này:

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

với một Thẻ HTML như thế này:

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

Sau đó, hình ảnh e sẽ chứa phiên bản PNG (ít nhất là trong Chrome) phiên bản PNG của những gì đã có trên canvas tại thời điểm tạo URL dữ liệu.

Lưu ý: chúng thực sự được gọi là data URI và không phải là URL, nhưng hàm javascript thực sự là .toDataURL(). Những thứ kỳ lạ.