Alternatywna dla wielu przeglądarek alternatywa dla Canvas2Image lub HTML5?

Question

Podczas opracowywania pattern generator Używam do tego samego problemu opisanego w pytaniu this od 2011.

odpowiedzi udzielonych naprawdę nie oferują cross-browser, stronie klienta rozwiązanie.

bym po kliknięciu Export Wzór przycisk przyjąć jedną z następujących rozwiązań:

1. Wyzwalanie pobieranie przez canvas2image przy jednoczesnym zapewnieniu, że plik jest zapisywany z rozszerzeniem .png (bez względu na Nazwa pliku jest ustawiony) lub,

2. wyświetlania widgetu (KendoUI najlepiej) z obrazem wynikającym z metody Canvas2Image.saveAsPNG() i umożliwić użytkownikowi zapisać go stamtąd najlepiej nie używając lame rozwiązanie prawym przyciskiem myszy, ale z linkiem lub przyciskiem.

HTML dla przycisku obecnie używam:

<button id="downloadbtn" onClick="javascript:downloadImage()" data-role="button" class="k-button">Export Pattern</button> 

Funkcja, która wyzwala pobieranie:

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  

    } 

Plik wydaje się w porządku pod OSX pobrać z Chrome w wersji 23.0. 1271.95 i Safari w wersji 5.1.7 (6534.57.2).

Mam raport osoby, która nie może otworzyć pliku po pobraniu go w Firefoksie 17.0.1 dla systemu OSX. Podobno pobieranie generuje plik .part.

Największym problemem jest to, że bez rozszerzenia pliku wątpię, że ta metoda może być wiarygodne.

Szukam rozwiązania tylko po stronie klienta o jak najszerszej kompatybilności z aktualnymi przeglądarkami, więc domyślnie atrybut HTML5 download nie poradziłby sobie tak, jak jest obecnie obsługiwany tylko w Chrome.

Wszelkie kreatywne rozwiązania?

Answer 1

Wpadłem na ten sam problem. Podstawowym problemem jest to, że nazwa pliku musi zostać dodana w nagłówku, ale canvas2images używa document.location.href = strData i strData nie ma nagłówków. Tak więc odpowiedź brzmi, canvas2image nie obsługuje funkcji, której potrzebujemy, i będziemy musieli wypróbować inne rozwiązanie. (Na przykład może FileSaver.js i płótno-toBlob.js)

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