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    

  }

该文件似乎可以在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/