Temat: kinetic + htm2canvas + zapisanie obrazka po stronie klienta

Za pomocą kinetic http://www.kineticjs.com tworzę dynamicznie zawartość graficzną canvas. Jak nadać nazwę pliku do zapisania po stronie klienta?

function canvasAppend(element) {
html2canvas(document.getElementById(element), {
onrendered: function(canvas) {
canvas.id = "image_canvas";

document.getElementById('canvas_container').appendChild(canvas);

var images = document.getElementById('image_canvas');
var image = images.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image;

document.getElementById('canvas_container').removeChild(canvas);

}
});


}

Temat: kinetic + htm2canvas + zapisanie obrazka po stronie klienta

Znam tylko dwa rozwiązania tego problemu, jedno gorsze od drugiego. Może ktoś inny pomoże.

1. wersja leniwa to wykorzystać atrybut download z HTML5. Efekt? Zero JS-a. Zwyczajnie będziesz mógł pobrać takowy plik. Tu masz info:
http://updates.html5rocks.com/2011/08/Downloading-reso...
Wady? Sporo. Tylko przeglądarki Firefox, Chrome i Opera mają to zaimplementowane. Odpada cała reszta z wersjami mobilnymi włącznie.

Więc jest to wygodne, jednak marne rozwiązanie.

2. Paskudne ale działające to takie gdzie potrzebujesz asysty serwera. Do serwera wysyłasz dane pliku i tam jakiś skrypt przygotowuje obrazek i wysyła go z odpowiednimi nagłówkami wywołując okienko logowania ze wszystkim co potrzebujesz.

Jeżeli znajdziesz lepsze, uniwersalne rozwiązanie to daj znać.

Temat: kinetic + htm2canvas + zapisanie obrazka po stronie klienta

Dariusz P.:
Znam tylko dwa rozwiązania tego problemu, jedno gorsze od drugiego. Może ktoś inny pomoże.

1. wersja leniwa to wykorzystać atrybut download z HTML5. Efekt? Zero JS-a. Zwyczajnie będziesz mógł pobrać takowy plik. Tu masz info:
http://updates.html5rocks.com/2011/08/Downloading-reso...
Wady? Sporo. Tylko przeglądarki Firefox, Chrome i Opera mają to zaimplementowane. Odpada cała reszta z wersjami mobilnymi włącznie.

Więc jest to wygodne, jednak marne rozwiązanie.

2. Paskudne ale działające to takie gdzie potrzebujesz asysty serwera. Do serwera wysyłasz dane pliku i tam jakiś skrypt przygotowuje obrazek i wysyła go z odpowiednimi nagłówkami wywołując okienko logowania ze wszystkim co potrzebujesz.

Jeżeli znajdziesz lepsze, uniwersalne rozwiązanie to daj znać.

Dzięki za podpowiedzi. Ale jak połączyć atrybut html5 'download' z wywoływaną funkcją js ?

<a href="javascript:void()" onClick="canvasDownload('container');" download="file.png">Download file</a>

W tym przykładzie atrybut nie przynosi oczekiwanego efektu. Rozumiem, że się nie da....Ten post został edytowany przez Autora dnia 30.05.14 o godzinie 13:43

Temat: kinetic + htm2canvas + zapisanie obrazka po stronie klienta

Dobra, wybacz mój błąd. Wygląda na to że nadal jest z tym problem. Zabawa wygląda tak że atrybut download ustawia nazwę pliku przy pobieraniu niezależnie od jego prawdziwej nazwy. Założyłem że jak url będzie zawierał dane canvasa to zachowa się tak samo. Niestety błędnie, właśnie to przetestowałem.

Także ten sposób odpada.

Temat: kinetic + htm2canvas + zapisanie obrazka po stronie klienta

Dziękuję wszystkim za pomoc! Rzeczywiście nie łatwo rozwiązać tą kwestię.
Po intensywnych poszukiwaniach znalazłem w sieci bardzo przydatny skrypt https://github.com/eligrey/FileSaver.js, który udało mi się zintegrować z moją aplikacją. Przypominam, że chodzi tutaj o pewne narzędzie tworzonej przeze mnie aplikacji, umożliwiające dynamiczne tworzenie zawartości canvasa. Skrypt FileSaver pozwala na zapisanie, po stronie klienta, dynamicznie utworzonej zawartości canvasa jako plik z góry ustaloną nazwą, przykładowo obrazek.png.

Przykład z pewnej części mojej aplikacji:

 function canvasAppend(element) {

        html2canvas(document.getElementById(element), {

          onrendered: function(canvas) {

		   canvas.id = "image_canvas";		   

           

		   document.getElementById('canvas_container').appendChild(canvas);

          

		   // STANDARDOWE ZAPISYWANIE PLIKU PO STRONIE KLIENTA

		   // var images = document.getElementById('image_canvas');

                   // var image = images.toDataURL("image/png").replace("image/png", "image/octet-stream");  

                  // window.location.href = image;

		   		   

		  var canvasImage = document.getElementById("image_canvas"), ctx = canvasImage.getContext("2d");

 		   

	      // FILESAVER !

             canvasImage.toBlob(

		     function(blob) {

              saveAs(blob, "obrazek.png");

             }

		    );

		   

		   document.getElementById('canvas_container').removeChild(canvas);

		   		  

		  }

         });

	  

	  

     }	 

Ważna uwaga autora skryptu, jeżeli zależy nam na kompatybilności cross-browser: "The standard W3C File API Blob interface is not available in all browsers. canvas-to Blob.js is a cross-browser Blob implementation that solves this."Ten post został edytowany przez Autora dnia 30.05.14 o godzinie 23:22