HTMLCanvasElement : méthode toBlob()

Syntaxe

toBlob(callback)
toBlob(callback, type)
toBlob(callback, type, quality)

Paramètres

callback

Une fonction de rappel recevant l'objet Blob résultant en argument unique. null peut être passé si l'image ne peut pas être créée pour une raison quelconque.

type Facultatif

Une chaîne de caractères indiquant le format de l'image. Le type par défaut est image/png ; ce type est également utilisé si le type fourni n'est pas pris en charge.

quality Facultatif

Un nombre (Number) compris entre 0 et 1 indiquant la qualité de l'image à utiliser lors de la création d'images avec des formats prenant en charge la compression destructive (par exemple image/jpeg ou image/webp). L'agent utilisateur utilisera sa valeur de qualité par défaut si cette option n'est pas précisée, ou si le nombre est en dehors de la plage autorisée.

Valeur de retour

Aucune (undefined).

Exceptions

SecurityError

Le bitmap du canevas n'est pas d'origine sûre ; au moins une partie de son contenu a été ou pourrait avoir été chargée depuis un site différent de celui d'où provient le document.

Exemples

Obtenir un fichier représentant le canevas

Une fois que vous avez dessiné du contenu dans un canevas, vous pouvez le convertir en un fichier dans n'importe quel format d'image pris en charge. Le fragment de code ci‑dessous, par exemple, récupère l'image contenue dans l'élément HTML <canvas> dont l'ID est « canvas », obtient une copie en tant qu'image PNG, puis ajoute un nouvel élément <img> au document, dont la source est l'image créée à partir du canevas.

const canvas = document.getElementById("canvas");

canvas.toBlob((blob) => {
  const newImg = document.createElement("img");
  const url = URL.createObjectURL(blob);

  newImg.src = url;
  document.body.appendChild(newImg);
});

Ici nous créons une image PNG ; si vous ajoutez un second paramètre à l'appel toBlob(), vous pouvez préciser un autre type d'image pris en charge par l'agent utilisateur. Par exemple, pour obtenir l'image au format JPEG :

canvas.toBlob(
  (blob) => {
    /* … */
  },
  "image/jpeg",
  0.95,
); // JPEG à 95% de qualité

Remarquez que nous ne révoquons pas immédiatement l'URL d'objet après le chargement de l'image, car cela rendrait l'image inutilisable pour les interactions utilisateur (comme le clic droit pour enregistrer l'image ou l'ouverture dans un nouvel onglet). Pour les applications de longue durée, vous devez révoquer les URL d'objet lorsqu'elles ne sont plus nécessaires (par exemple lorsque l'image est retirée du DOM) afin de libérer de la mémoire en appelant la méthode URL.revokeObjectURL() et en lui passant la chaîne de caractères de l'URL d'objet.

Convertir un canevas en ico (Mozilla uniquement)

Cela utilise -moz-parse pour convertir le canevas en ico, et fonctionne donc uniquement sur Firefox. Windows XP ne prend pas en charge la conversion de PNG en ico, il utilise donc bmp à la place. Un lien de téléchargement est créé en définissant l'attribut de téléchargement. La valeur de l'attribut de téléchargement correspond au nom de fichier utilisé.

const canvas = document.getElementById("canvas");
const d = canvas.width;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

function blobCallback(iconName) {
  return (b) => {
    const a = document.createElement("a");
    a.textContent = "Download";
    document.body.appendChild(a);
    a.style.display = "block";
    a.download = `${iconName}.ico`;
    a.href = window.URL.createObjectURL(b);
  };
}
canvas.toBlob(
  blobCallback("passThisString"),
  "image/vnd.microsoft.icon",
  "-moz-parse-options:format=bmp;bpp=32",
);

Enregistrer toBlob sur le disque avec OS.File (contexte Chrome/add-on uniquement)

const canvas = document.getElementById("canvas");
const d = canvas.width;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

function blobCallback(iconName) {
  return (b) => {
    const r = new FileReader();
    r.onloadend = () => {
      // r.result contient l'ArrayBuffer.
      Cu.import("resource://gre/modules/osfile.jsm");
      const writePath = OS.Path.join(
        OS.Constants.Path.desktopDir,
        `${iconName}.ico`,
      );
      const promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), {
        tmpPath: `${writePath}.tmp`,
      });
      promise.then(
        () => {
          console.log("successfully wrote file");
        },
        () => {
          console.log("failure writing file");
        },
      );
    };
    r.readAsArrayBuffer(b);
  };
}

canvas.toBlob(
  blobCallback("passThisString"),
  "image/vnd.microsoft.icon",
  "-moz-parse-options:format=bmp;bpp=32",
);

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'interface Blob