self.createImageBitmap()

The createImageBitmap method exists on the global in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.

Syntax

createImageBitmap(image[, options]).then(function(response) { ... });
createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });

Parameters

image
An image source, which can be an <img>, SVG <image>, <video>, <canvas>, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElementBlob, ImageData, ImageBitmap, or OffscreenCanvas object.
sx
The x coordinate of the reference point of the rectangle from which the ImageBitmap will be extracted.
sy
The y coordinate of the reference point of the rectangle from which the ImageBitmap will be extracted.
sw
The width of the rectangle from which the ImageBitmap will be extracted. This value can be negative.
sh
The height of the rectangle from which the ImageBitmap will be extracted. This value can be negative.
options Optional
An object that sets options for . The available options are:
  • imageOrientation: Indicates whether the image is presented as is or flipped vertically. Either none (default) or flipY.
  • premultiplyAlpha: Indicates that the bitmaps color channels are premultiplied by the alpha channel. One of none, premultiply, or default (default).
  • colorSpaceConversion: Indicates whether the image is decoded using color space conversion. Either none or default (default). The value default indicates that implementation-specific behavior is used.
  • resizeWidth: A long integer that indicates the new width.
  • resizeHeight: A long integer that indicates the new height.
  • resizeQuality: Specifies an image scaling algorithm. One of pixelated, low (default), medium, or high.

Return value

A Promise which resolves to an ImageBitmap object containing bitmap data from the given rectangle.

Example

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

image.onload = function() {
  Promise.all([
    createImageBitmap(this, 0, 0, 32, 32),
    createImageBitmap(this, 32, 0, 32, 32)
  ]).then(function(sprites) {
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
}

image.src = 'sprites.png';

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'createImageBitmap' in that specification.
Living Standard  

Browser compatibility

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support 50

42 (42)
52 (52)[1]

No support No support (Yes) No support
options parameter 52 ? No support No support 39 No support
resizeWidth, resizeHeight, and resizeQuality 54 ? No support No support ? No support
SVGImageElement as source image 59 ? No support No support ? No support
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 50 50

42.0 (42)
52.0 (52)[1]

? (Yes) ?
options parameter 52 52 ? ? 39 ?
resizeWidth, resizeHeight, and resizeQuality 54 ? ? ? ?  
SVGImageElement as source image 59 59 ? ? ? ?

[1] createImageBitmap() now defined on WindowOrWorkerGlobalScope mixin.

See also

Document Tags and Contributors

 Last updated by: DomenicDenicola,