Javascript Canvas2Image或HTML5下载属性的跨浏览器替代方案？

在开发过程中，我遇到了与2011年问题中描述的相同的问题

给出的答案并没有真正提供跨浏览器、客户端解决方案

单击导出模式按钮时，我将接受以下任一解决方案：

通过canvas2image触发下载，同时确保文件以.png扩展名保存（无论文件名设置为什么）或

显示一个小部件（最好是KendoUI），其中包含由

Canvas2Image.saveAsPNG（）

方法生成的图像，并让用户从那里保存它，最好不要使用lame右键单击解决方案，而是使用链接或按钮

我当前使用的按钮的HTML：

<button id="downloadbtn" onClick="javascript:downloadImage()" data-role="button" class="k-button">Export Pattern</button>   

该文件在OSX下的Chrome版本为23.0.1271.95，Safari版本为5.1.7（6534.57.2），下载效果良好

我有一个报告说，有人在Firefox 17.0.1下下载OSX后无法打开该文件。显然下载会生成一个.part文件

最大的问题是，如果没有文件扩展名，我怀疑这种方法是否可靠。

我正在寻找一个客户端唯一的解决方案与当前浏览器尽可能广泛的兼容性，所以我猜HTML5

download

属性不会起作用，因为它目前只在Chrome中受支持

---

有什么创造性的解决方案吗？

我遇到了同样的问题。基本问题是需要在标题中添加文件名，但Canvas2图像使用document.location.href=strData，而strData没有标题。所以答案是，canvas2image不支持我们需要的功能，我们需要尝试另一种解决方案。（例如，FileSaver.js和canvas toBlob.js）

---

谢谢！FileSaver看起来很有前途，尽管从Github上受支持的浏览器来看，似乎Safari的任何版本都不支持文件名，这是否意味着Safari上不可能有PNG扩展？我不知道它是否能在Safari上工作，尝试一下也不会有什么坏处。@EricHartford没有。无论是台式机还是移动设备，这都是非常不幸的。我正在考虑将FileSaver.js作为主要解决方案，然后使用API对其进行备份，这将更改HTTP头以触发下载，或者根据传递的base64字符串上载图像，然后用其url响应到客户端。两年过去了，我想ping一下，是否有更好的解决方案用于包括iOS 8/OSX的当前浏览器？

function downloadImage () {

    //...extra code omitted
    var oCanvas = document.getElementById("my_canvas");
    oCanvas.width = $("#pixels-h").val();
    oCanvas.height = $("#pixels-v").val(); 
    Canvas2Image.saveAsPNG(oCanvas);
    //...extra code omitted    

  }