5

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

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

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

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

  2. 使用该方法产生的图像显示一个小部件（最好是 KendoUI），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) 可以正常下载。

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

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

我正在寻找一种与当前浏览器尽可能兼容的仅限客户端的解决方案，所以我猜 HTML5download属性不会起作用，因为它目前仅在 Chrome 中受支持。

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

4

1 回答 1

2

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

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

于 2013-12-17T18:44:20.250 回答