Метод Window: createImageBitmap()

Метод createImageBitmap() интерфейса Window создаёт карту битов из заданного источника, при необходимости обрезая её до части этого источника. Он принимает различные источники изображений и возвращает Promise, который разрешается до ImageBitmap.

image

Источник изображения, который может быть одним из следующих:

• HTMLImageElement
• SVGImageElement
• HTMLVideoElement
• HTMLCanvasElement
• Blob
• ImageData
• ImageBitmap
• OffscreenCanvas
• VideoFrame

sx

Координата x точки отсчёта прямоугольника, из которого будет извлечена ImageBitmap.

sy

Координата y точки отсчёта прямоугольника, из которого будет извлечена ImageBitmap.

sw

Ширина прямоугольника, из которого будет извлечена ImageBitmap. Значение может быть отрицательным.

sh

Высота прямоугольника, из которого будет извлечена ImageBitmap. Значение может быть отрицательным.

options Необязательный

Объект, задающий параметры извлечения изображения. Доступные параметры:

imageOrientation

Указывает, как должна быть ориентирована карта битов изображения.

from-image

Изображение ориентировано согласно данным метаданных EXIF об ориентации, если они присутствуют (по умолчанию).

flipY

Изображение ориентировано согласно данным метаданных EXIF об ориентации, если они присутствуют, а затем перевёрнуто по вертикали.

none

Изображение ориентировано согласно кодированию изображения, игнорируя любые метаданные об ориентации (такие как метаданные EXIF, которые могут быть добавлены к изображению, чтобы указать, что камера была повернута боком для захвата изображения в портретном режиме).

premultiplyAlpha

Указывает, должны ли цветовые каналы карты битов быть предварительно умножены на альфа-канал. Одно из none, premultiply, или default (по умолчанию).

colorSpaceConversion

Указывает, должно ли изображение быть декодировано с преобразованием цветового пространства. Либо none или default (по умолчанию). Значение default указывает, что используется поведение, специфичное для реализации.

resizeWidth

Целое число, указывающее выходную ширину.

resizeHeight

Целое число, указывающее выходную высоту.

resizeQuality

Указывает алгоритм, используемый для изменения размера входного изображения для соответствия выходным размерам. Одно из pixelated, low (по умолчанию), medium, или high.

A Promise, который разрешается до объекта ImageBitmap, содержащего данные карты битов из заданного прямоугольника.

В этом примере загружается спрайт-шит, извлекаются отдельные спрайты, а затем каждый спрайт отрисовывается на холсте. Спрайт-шит — это изображение, содержащее несколько меньших изображений, каждое из которых вы хотите иметь возможность отобразить по отдельности.

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

// Wait for the sprite sheet to load
image.onload = () => {
  Promise.all([
    // Cut out two sprites from the sprite sheet
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32),
    createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }),
  ]).then((sprites) => {
    // Draw each sprite onto the canvas
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
    ctx.drawImage(sprites[2], 64, 64);
  });
};

// Load the sprite sheet from an image file
image.src = "50x50.jpg";

• WorkerGlobalScope.createImageBitmap()
• CanvasRenderingContext2D.drawImage()
• ImageData