Window : mthode createImageBitmap()

Baseline Large disponibilit *

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2021.

* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.

En savoir plus
Voir la compatibilit complte

La mthode createImageBitmap() de l'interface Window cre un bitmap partir d'une source donne, ventuellement rogn pour ne contenir qu'une portion de cette source. Elle accepte diffrents types de sources d'image et retourne une Promise qui se rsout en un ImageBitmap.

Syntaxe

createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)

Paramtres

image

Une source d'image, qui peut tre l'une des suivantes :

sx

La coordonne x du point de rfrence du rectangle partir duquel un ImageBitmap sera extrait.

sy

La coordonne y du point de rfrence du rectangle partir duquel un ImageBitmap sera extrait.

sw

La largeur du rectangle partir duquel un ImageBitmap sera extrait. Cette valeur peut tre ngative.

sh

La hauteur du rectangle partir duquel un ImageBitmap sera extrait. Cette valeur peut tre ngative.

options Facultatif

Un objet qui dfinit des options pour l'extraction de l'image. Les options disponibles sont :

imageOrientation

Indique comment l'image matricielle doit tre oriente.

from-image: Image oriente selon les mtadonnes d'orientation EXIF, si prsentes (par dfaut).
flipY: Image oriente selon les mtadonnes EXIF, si prsentes, puis retourne verticalement.
none: Image oriente selon l'encodage de l'image, en ignorant toute mtadonne d'orientation (comme les mtadonnes EXIF, qui peuvent tre ajoutes une image pour indiquer que l'appareil a t tourn sur le ct pour capturer l'image en mode portrait).

premultiplyAlpha

Indique si les canaux de couleur du bitmap doivent tre multiplis par le canal alpha. L'une des valeurs none, premultiply ou default (par dfaut).

colorSpaceConversion

Indique si l'image doit tre dcode en utilisant une conversion d'espace colorimtrique. Soit none soit default (par dfaut). La valeur default indique qu'un comportement dpendant de l'implmentation est utilis.

resizeWidth

Un entier long qui indique la largeur de sortie.

resizeHeight

Un entier long qui indique la hauteur de sortie.

resizeQuality

Indique l'algorithme utiliser pour redimensionner l'entre afin de correspondre aux dimensions de sortie. L'une des valeurs pixelated, low (par dfaut), medium ou high.

Image originale&nbsp;:
<img src="50x50.jpg" />
<hr />
<canvas id="myCanvas"></canvas>

canvas {
  border: 2px solid green;
}

const canvas = document.getElementById("myCanvas"),
  ctx = canvas.getContext("2d"),
  image = new Image();

// Attendre le chargement de la feuille de sous-images
image.onload = () => {
  Promise.all([
    // Dcouper deux sous-images depuis la feuille de sous-images
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32),
    createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }),
  ]).then((sousImages) => {
    // Dessiner chaque sous-image sur le canevas
    ctx.drawImage(sousImages[0], 0, 0);
    ctx.drawImage(sousImages[1], 32, 32);
    ctx.drawImage(sousImages[2], 64, 64);
  });
};

// Charger la feuille de sous-images depuis un fichier image
image.src = "50x50.jpg";