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

Question

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

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

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

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

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

我正在使用的按钮的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    

  }

该文件似乎可以在OSX下使用Chrome版本23.0.1271.95和Safari版本5.1.7（6534.57.2）下载。

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

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

我正在寻找一种仅与客户端兼容的解决方案，与当前浏览器具有最广泛的兼容性，因此我猜HTML5 download属性不会起作用，因为目前只支持Chrome。

有创意的解决方案

Answer 1

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

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