self.createImageBitmap()

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.

sx

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

sy

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

sw

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

sh

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.

Valor devuelto

Una Promise que es resuelta con un objeto ImageBitmap, el cual contiene los datos del mapa de bits generado para el rectángulo dado.

Ejemplo

Creando sprites desde un sprite sheet

El siguiente ejemplo carga un sprite sheet, extrae los sprites, y muestra cada uno de ellos en el canvas. Un sprite sheet es una imagen que contiene multiples imágenes más pequeñas, que finalmente son utilizadas de manera individual.

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";

Especificaciones

Specification
HTML
# dom-createimagebitmap-dev

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
createImageBitmap
options.colorSpaceConversion parameter
options.imageOrientation parameter
Value from-image
Value none
ExperimentalNon-standard
options.premultiplyAlpha parameter
options.resizeHeight parameter
options.resizeQuality parameter
options.resizeWidth parameter
SVGImageElement as source image

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

Ver también