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, HTMLCanvasElementBlob, 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 Optional
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.

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

Especificación Estado  Comentario
HTML Living Standard
La definición de 'createImageBitmap' en esta especificación.
Living Standard  

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
createImageBitmapChrome Soporte completo 50Edge Sin soporte NoFirefox Soporte completo 52
Notas
Soporte completo 52
Notas
Notas createImageBitmap() now defined on WindowOrWorkerGlobalScope mixin.
Soporte completo 42
IE Sin soporte NoOpera Soporte completo SiSafari Sin soporte NoWebView Android Soporte completo 50Chrome Android Soporte completo 50Firefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS ? Samsung Internet Android ?
options parameterChrome Soporte completo 52Edge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 39Safari Sin soporte NoWebView Android Soporte completo 52Chrome Android Soporte completo 52Firefox Android Sin soporte NoOpera Android Soporte completo 41Safari iOS ? Samsung Internet Android ?
resizeWidth, resizeHeight, and resizeQualityChrome Soporte completo 54Edge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Soporte completo SiSafari Sin soporte NoWebView Android Soporte completo 54Chrome Android Soporte completo 54Firefox Android Sin soporte NoOpera Android Soporte completo SiSafari iOS ? Samsung Internet Android ?
SVGImageElement as source imageChrome Soporte completo 59Edge Sin soporte NoFirefox Soporte completo 65IE Sin soporte NoOpera Soporte completo SiSafari Sin soporte NoWebView Android Soporte completo 59Chrome Android Soporte completo 59Firefox Android Soporte completo 65Opera Android Soporte completo SiSafari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.

Ver también