Question

在制定pattern generator时，我遇到了2011年this问题中描述的同一问题。

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

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

通过canvas2image触发下载，同时确保文件以.png扩展名保存（无论文件名设置为何处）或，
使用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）下载。

我有一份报告称某人在Firefox 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/

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

1 个答案: