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/