self.createImageBitmap()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since septiembre de 2021.

* Some parts of this feature may have varying levels of support.

El método createImageBitmap() crea un bitmap a partir de un recurso especificado, opcionalmente recortado para mostrar únicamente una porción de este. El método existe a nivel global como parte, tanto de las ventanas (window), como de los workers. Este admite una variedad de tipos de entrada, y devuelve una Promise que es resuelta con un ImageBitmap.

Sintaxis

createImageBitmap(image[, options]).then(function(response) { ... }); createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });

Parámetros

image

Un recurso/imagen origen, que puede uno de los siguientes elementos: <img>, SVG <image>, <video>, <canvas>, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, Blob, ImageData, ImageBitmap, o OffscreenCanvas.

La coordenada x del rectángulo que será usado para la extracción del ImageBitmap.

La coordenada y del rectángulo que será usado para la extracción del ImageBitmap.

La anchura del rectángulo que será usado para extraer el ImageBitmap. El valor podría ser negativo.

La altura del rectángulo que será usado para extraer el ImageBitmap. El valor podría ser negativo.

options Opcional

Un objeto que proporciona opciones para la extracción de la imagen. Las opciones posibles son:

imageOrientation: Especifica si la imagen debe ser extraida tal y como se muestra, o debe ser volteada verticalmente. Las valores posibles: none (por defecto) o flipY.
premultiplyAlpha: Especifica si los canales de color del mapa de bits generado deben premultiplicarse por el canal alpha. Uno de: none, premultiply, o default (por defecto).
colorSpaceConversion: Especifica si la imagen debe ser decodificada usando conversión del espacio de color. Uno de: none o default (por defecto). El valor default indica que se usará la implementación que haya disponible.
resizeWidth: Un entero largo que especifica la anchura final.
resizeHeight: Un entero largo que especifica la altura final.
resizeQuality: Especifica que algorítmo debe ser usado en el redimensionado para alcanzar las dimensiones deseadas. Uno de estos valores: pixelated, low (por defecto), medium, o high.

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

// Esperar que el sprite sheet se cargue
image.onload = function () {
  Promise.all([
    // Recortar dos sprites del conjunto
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32),
  ]).then(function (sprites) {
    // Pintar cada uno de los sprites en el canvas
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
};

// Cargar el sprite sheet desde un archivo de imagen
image.src = "sprites.png";