直接从HTML5画布保存图像

我浏览了highcharts网站上提供的演示JSFIDLE。 当我单击“另存为png”按钮时，它会下载一个名为“下载”的文件，而不是png文件

HTML:

---

您可以将画布中的数据uri分配给锚元素，然后可以使用设置文件名的下载属性对其进行属性设置

例如，假设此锚存在于HTML中：

<a id="saveAs" href="#">Click to download</a>

现在，您可以单击锚链接，它将允许您下载具有设置文件名的文件

---

您还可以动态创建屏幕外的锚定标记，并通过模拟单击事件来调用单击。

您可以将画布中的数据uri分配给锚定元素，然后可以使用下载属性设置文件名对其进行属性设置

例如，假设此锚存在于HTML中：

<a id="saveAs" href="#">Click to download</a>

现在，您可以单击锚链接，它将允许您下载具有设置文件名的文件

---

您还可以动态创建屏幕外的锚定标记，并通过模拟单击事件来调用单击。

这里有一个可用的小提琴，但我想知道它是否适用于IE9及以下版本@很遗憾，Nitesh的旧浏览器和一些新浏览器不支持新的下载属性。下面是一个例子。@Nitesh您的JSFIDLE中的VisitContainer到底是什么？正如在

if（$（'#visitcontainer'）.length>0）中一样，

这里有一把可以工作的小提琴，但我想知道它是否适用于IE9及以下版本@很遗憾，Nitesh的旧浏览器和一些新浏览器不支持新的下载属性。下面是一个例子。@Nitesh您的JSFIDLE中的VisitContainer到底是什么？如

if（$（'#visitcontainer'）.length>0）中所示
<a id="saveAs" href="#">Click to download</a>

var link = document.getElementById('saveAs');

link.href = canvas.toDataURL();   /// set data-uri as href, defaults to PNG
link.download = 'myFilename.png'; /// set filename