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

Question

在开发模式生成器时，我遇到了2011年这个问题中描述的相同问题。

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

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

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

2. 显示一个具有Canvas2Image.saveAsPNG()方法产生的图像的小部件(KendoUI)，并让用户从那里保存它——最好不要使用蹩脚的右键单击解决方案，而是使用链接或按钮。

我当前使用的按钮的HTML：

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

触发下载的功能：

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    
}

该文件似乎可以在Chrome版本23.0.1271.95和Safari版本5.1.7(6534.57.2)的OSX下下载

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

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

我正在寻找一个仅客户端的解决方案，它与当前浏览器具有尽可能广泛的兼容性，所以我想HTML5download属性不会奏效，因为它目前只在Chrome中受支持。

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

Answer 1

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

http://eligrey.com/demos/FileSaver.js/