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étodocreateImageBitmap() crea unbitmap 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 losworkers. Este admite una variedad de tipos de entrada, y devuelve unaPromise que es resuelta con unImageBitmap.

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, oOffscreenCanvas.

sx

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

sy

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

sw

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

sh

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

optionsOpcional

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) oflipY.
premultiplyAlpha: Especifica si los canales de color del mapa de bits generado deben premultiplicarse por el canal alpha. Uno de:none,premultiply, odefault (por defecto).
colorSpaceConversion: Especifica si la imagen debe ser decodificada usando conversión del espacio de color. Uno de:none odefault (por defecto). El valordefault 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, ohigh.

var canvas = document.getElementById("myCanvas"),  ctx = canvas.getContext("2d"),  image = new Image();// Esperar que el sprite sheet se cargueimage.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 imagenimage.src = "sprites.png";