Canvas

Создание, преобразование и отображение изображений и графики внутри HTML-элемента.

Например, createImageBitmap

function createImageBitmap

Перегрузка 1

createImageBitmap(

image: ImageBitmapSource,

options?: ImageBitmapOptions,
): Promise<ImageBitmap>

Создает новый объект ImageBitmap из указанного источника.

Примеры

try {
  // Fetch an image
  const response = await fetch("https://example.com/image.png");
  const blob = await response.blob();

  // Basic usage
  const basicBitmap = await createImageBitmap(blob);
  console.log("Basic bitmap size:", basicBitmap.width, basicBitmap.height);

  // With options
  const resizedBitmap = await createImageBitmap(blob, {
    resizeWidth: 100,
    resizeHeight: 100,
    resizeQuality: "high",
    imageOrientation: "flipY"
  });

  // Cleanup when done
  basicBitmap.close();
  resizedBitmap.close();
} catch (error) {
  console.error("Failed to create ImageBitmap:", error);
}

Параметры

image: ImageBitmapSource

Изображение, из которого создается объект ImageBitmap.

options: ImageBitmapOptions

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

Параметры создания объекта ImageBitmap.

Возвращаемый тип

Promise<ImageBitmap>

См. также

https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap

Перегрузка 2

createImageBitmap(

image: ImageBitmapSource,

sx: number,

sy: number,

sw: number,

sh: number,

options?: ImageBitmapOptions,
): Promise<ImageBitmap>

Создает новый объект ImageBitmap из указанного источника, обрезая его по заданному прямоугольнику.

Примеры

try {
  // Fetch an image
  const response = await fetch("https://example.com/image.png");
  const blob = await response.blob();

  // Cropping parameters
  const croppedBitmap = await createImageBitmap(
    blob,
    0,    // sx: start x
    0,    // sy: start y
    50,   // sw: source width
    50,   // sh: source height
  );

  // Cleanup when done
  croppedBitmap.close();
} catch (error) {
  console.error("Failed to create ImageBitmap:", error);
}

Параметры

image: ImageBitmapSource

Изображение, из которого создается объект ImageBitmap.

sx: number

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

sy: number

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

sw: number

Ширина подпрямоугольника, из которого будет обрезан объект ImageBitmap.

sh: number

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

options: ImageBitmapOptions

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

Параметры создания объекта ImageBitmap.

Возвращаемый тип

Promise<ImageBitmap>

См. также

https://developer.mozilla.org/en-US/docs/Web/API/Window/createImageBitmap

интерфейс GPUCanvasConfiguration

Свойства

device: GPUDevice

format: GPUTextureFormat

usage: GPUTextureUsageFlags

необязательное

viewFormats: GPUTextureFormat[]

необязательное

colorSpace: "srgb" | "display-p3"

необязательное

alphaMode: GPUCanvasAlphaMode

необязательное

presentMode: GPUPresentMode

необязательное

интерфейс GPUCanvasContext

Контекст отрисовки, отображающий изображения, созданные с помощью WebGPU, на OffscreenCanvas. Получается из OffscreenCanvas.getContext с идентификатором контекста "webgpu".

Свойства

canvas: OffscreenCanvas

только для чтения

Холст, к которому привязан этот контекст.

Методы

configure(configuration: GPUCanvasConfiguration): undefined

getConfiguration(): GPUCanvasConfiguration | null

unconfigure(): undefined

getCurrentTexture(): GPUTexture

переменная GPUCanvasContext

Объект-конструктор для GPUCanvasContext.

GPUCanvasContext получается из OffscreenCanvas.getContext с идентификатором контекста "webgpu", а не создаётся напрямую.

Свойства

prototype: GPUCanvasContext

интерфейс ImageBitmap

ImageBitmap — интерфейс, представляющий растровое изображение, которое можно нарисовать на холсте.

Свойства

height: number

только для чтения

Высота растрового изображения.

width: number

только для чтения

Ширина растрового изображения.

Методы

close(): void

Освобождает ресурсы imageBitmap.

переменная ImageBitmap

ImageBitmap представляет растровое изображение, которое можно нарисовать на холсте.

Свойства

prototype: ImageBitmap

интерфейс ImageBitmapOptions

Параметры createImageBitmap.

Свойства

colorSpaceConversion: ColorSpaceConversion

необязательное

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

imageOrientation: ImageOrientation

необязательное

Указывает ориентацию растрового изображения.

premultiplyAlpha: PremultiplyAlpha

необязательное

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

resizeHeight: number

необязательное

Выходная высота.

resizeQuality: ResizeQuality

необязательное

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

resizeWidth: number

необязательное

Выходная ширина.

интерфейс ImageBitmapRenderingContext

Контекст отрисовки, отображающий содержимое ImageBitmap на OffscreenCanvas. Получается из OffscreenCanvas.getContext с идентификатором контекста "bitmaprenderer".

Свойства

canvas: OffscreenCanvas

только для чтения

Холст, к которому привязан этот контекст.

Методы

transferFromImageBitmap(bitmap: ImageBitmap | null): undefined

переменная ImageBitmapRenderingContext

Объект-конструктор для ImageBitmapRenderingContext.

ImageBitmapRenderingContext получается из OffscreenCanvas.getContext с идентификатором контекста "bitmaprenderer", а не создается напрямую.

Свойства

prototype: ImageBitmapRenderingContext

интерфейс ImageEncodeOptions

Свойства

quality: number

необязательно

type: string

необязательно

интерфейс OffscreenCanvas

наследует EventTarget

Холст, который можно отрисовывать вне основного потока и без привязки к DOM. Он предоставляет контексты рисования через OffscreenCanvas.getContext и может создавать Blob или ImageBitmap на основе своего содержимого.

Свойства

height: number

Высота холста.

width: number

Ширина холста.

Методы

convertToBlob(options?: ImageEncodeOptions): Promise<Blob>

Создаёт объект Blob, представляющий изображение, содержащееся на холсте.

getContext(

contextId: "bitmaprenderer",

options?: any,
): ImageBitmapRenderingContext | null

Получает контекст рисования для холста. Если этот метод уже вызывался, он вернёт тот же контекст.

getContext(

contextId: "webgpu",

options?: any,
): GPUCanvasContext | null

getContext(

contextId: OffscreenRenderingContextId,

options?: any,
): OffscreenRenderingContext | null

getContext(

contextId: 
"2d"
 | "webgl"
 | "webgl2"
,

options?: any,
): null

transferToImageBitmap(): ImageBitmap

Создаёт объект ImageBitmap, представляющий изображение, содержащееся на холсте.

См. также

https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

переменная OffscreenCanvas

Объект-конструктор для OffscreenCanvas, используемый для создания нового автономного холста с заданными width и height, который можно отрисовывать без привязки к DOM.

Свойства

prototype: OffscreenCanvas

См. также

https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

псевдоним типа ColorSpaceConversion

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

Определение

"default" | "none"

псевдоним типа GPUCanvasAlphaMode

Определение

"opaque" | "premultiplied"

псевдоним типа GPUPresentMode

Определение


"auto-vsync"
 | "auto-no-vsync"
 | "fifo"
 | "fifo-relaxed"
 | "immediate"
 | "mailbox"

псевдоним типа ImageBitmapSource

Тип ImageBitmapSource представляет собой источник данных изображения, который можно использовать для создания ImageBitmap.

Определение


Blob
 | ImageData
 | ImageBitmap

псевдоним типа ImageOrientation

Задает ориентацию растрового изображения.

Определение


"flipY"
 | "from-image"
 | "none"

псевдоним типа OffscreenRenderingContext

Определение

ImageBitmapRenderingContext | GPUCanvasContext

псевдоним типа OffscreenRenderingContextId

Определение

"bitmaprenderer" | "webgpu"

псевдоним типа PremultiplyAlpha

Указывает, следует ли умножать цветовые каналы растрового изображения на альфа-канал.

Определение


"default"
 | "none"
 | "premultiply"

псевдоним типа ResizeQuality

Задает алгоритм изменения размера входных данных для соответствия выходным размерам. Возможные значения: pixelated, low (по умолчанию), medium или high.

Определение


"high"
 | "low"
 | "medium"
 | "pixelated"