Extraits de code:Canvas

Un article de MDC.

Pour des informations générales sur l'utilisation de <canvas>, consultez le tutoriel.

[modifier] Sauvegarder une image canvas dans un fichier

La fonction suivante accepte un objet canvas et le chemin du fichier de destination. Le canvas est converti en un fichier PNG et sauvegardé vers l'emplacement spécifié. La fonction affiche une boîte de dialogue de la progression de téléchargement, mais cette boîte peut être supprimée.

function saveCanvas(canvas, destFile) {
  // convertit le chemin texte en un nsIFile
  var file = Components.classes["@mozilla.org/file/local;1"]
                       .createInstance(Components.interfaces.nsILocalFile);
  file.initWithPath(destFile);

  // crée une url de données depuis le canvas et crée alors les URIs de la source et de la cible
  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)
  
  // prépare à sauvegarder les données canvas
  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;
  
  // affiche un dialogue de téléchargement (supprimez ces 3 lignes pour un téléchargement silencieux)
  var xfer = Components.classes["@mozilla.org/transfer;1"]
                       .createInstance(Components.interfaces.nsITransfer);
  xfer.init(source, target, "", null, null, null, persist);
  persist.progressListener = xfer;
  
  // sauvegarde les données canvas vers le fichier
  persist.saveURI(source, null, null, null, null, file);
}