Zapisywanie obrazu canvas html 5 na lokalnym dysku twardym

Question

Utworzono kształty na kanwie HTML 5 przy użyciu biblioteki kineticjs. Teraz chcę zapisać płótno jako obraz na dysku twardym mojego lokalnego systemu. Pls powiedz mi, jak mogę to osiągnąć przy użyciu biblioteki KineticJS.

Answer 1

Po wybraniu płótna (używając czegoś podobnego do document.getElementById, jak sądzę), powinieneś móc wywołać następujące polecenie, aby przekonwertować płótno na daneURL.

Po uzyskaniu tego adresu URL otwórz go w innym oknie przeglądarki i wykonaj standardowe kliknięcie prawym przyciskiem-> Zapisz obraz jako i zapisz jako plik JPG/PNG/etc.

var canvas = document.getElementById("mycanvas"); 
var img = canvas.toDataURL("image/png"); 

, czy nie jesteś w stanie zapisać obraz na dysku programowo, nie jestem pewien, choć ja bardzo wątpię ze względu na ograniczenia bezpieczeństwa.

Aby uzyskać więcej informacji na temat programowego dostępu do systemu plików, sprawdź tę stronę referencyjną FileSystem HTML5.

http://www.html5rocks.com/en/tutorials/file/filesystem/

Więcej informacji na temat pobierania dataURL dla elementu canvas KinectJS Stage, patrz poniższy urywek/url.

<script> 
    stage.toDataURL({ 
    callback: function(){ 
     // do something with the data url 
    }, 
    mimeType: 'image/jpeg', 
    quality: 0.5 
    }); 
</script> 

http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/