Fragmenty kodu:Canvas

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

Ogólne informacje o używaniu <canvas> znajdują się w przewodniku.

[edytuj] Zapisywanie obrazu canvas do pliku

Poniższa funkcja akceptuje obiekt canvas i ścieżkę pliku docelowego. Canvas jest konwertowany do pliku PNG i jest zapisywany do określonej lokalizacji. Funkcja wyświetla okno procesu pobierania plików, lecz okno może być usunięte.

function saveCanvas(canvas, destFile) {
  // konwertuje łańcuch znaków ścieżki pliku string do nsIFile
  var file = Components.classes["@mozilla.org/file/local;1"]
                       .createInstance(Components.interfaces.nsILocalFile);
  file.initWithPath(destFile);

  // stwórz adres url danych z canvas, a następnie stwórz URI źródła i celu  
  var io = Components.classes["@mozilla.org/network/io-service;1"]
                     .getService(Components.interfaces.nsIIOService);
  var source = io.newURI(canvas.toDataURL("image/png", ""), "UTF8", null);
  var target = io.newFileURI(file)
  
  // przygotuj do zapisu dane
  var persist = Components.classes["@mozilla.org/embedding/browser/nsWebBrowserPersist;1"]
                          .createInstance(Components.interfaces.nsIWebBrowserPersist);
  
  persist.persistFlags = Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_REPLACE_EXISTING_FILES;
  persist.persistFlags |= Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_AUTODETECT_APPLY_CONVERSION;
  
  // wyświetl dialog pobierania pliku (usuń poniższe 3 linie, by go pominać)
  var xfer = Components.classes["@mozilla.org/transfer;1"]
                       .createInstance(Components.interfaces.nsITransfer);
  xfer.init(source, target, "", null, null, null, persist);
  persist.progressListener = xfer;
  
  // zapisz dane canvas do pliku
  persist.saveURI(source, null, null, null, null, file);
}