如何使用 heatmap.js 保存由 canvas 标签生成的图像文件？

Posted 2023-03-05

【中文标题】如何使用 heatmap.js 保存由 canvas 标签生成的图像文件？

【英文标题】：How I can save the image file generated by canvas tag with heatmap.js?

【发布时间】：2012-08-18 02:14:02

【问题描述】：

如何将生成的画布 heatmap.js 保存为图像？

我一直在用 toDataURL() 进行测试，但是我不能。

保存在服务器上。

【参考方案1】：

有什么问题？

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

似乎工作得很好

【讨论】：

但是我如何得到图片呢？

url 是一个data:url base64 编码的字符串，代表一张图片。您可以将该字符串上传到您的服务器并使用 php 函数将 base64 转换为图像文件。

如果您只想显示图像，那么您只需将生成的数据 URL 用作 img 元素的 src 属性，或者用作CSS。

【参考方案2】：

正如 garmur 评论的 here，您可以将数据 URL 作为 img 元素的来源，例如：

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

使用这样的 html 标记：

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

然后图像将包含（至少在 Chrome 中是这样的）PNG 版本，该版本是生成数据 URL 时 canvas 上的内容。

附带说明：它们实际上被称为data URI，而不是 URL，但 javascript 函数实际上是 .toDataURL()。奇怪的东西。

【讨论】：

如何将图片保存到服务器？

请解释一下，“将图像保存到服务器”是什么意思？您的意思是将其发送到服务器以使其处理图像吗？我将无法为您提供帮助。请看this的问题，也许它会帮助你，也许它不会。如果没有，请设置一个单独的问题。

你是什么意思，你得到一个错误说“未能完成关键代码”？那会很奇怪。为什么帖子不完整？

是的，我浏览的链接只包含执行我想要的部分所需的代码。但关键是canvas不是直接出现在代码中而是通过JavaScript，这个有很大关系......