The createImageBitmap()
method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise
which resolves to an ImageBitmap
.
createImageBitmap(image[, options]).then(function(response) { ... }); createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });
image
<img>
, SVG <image>
, <video>
, <canvas>
, HTMLImageElement
, SVGImageElement
, HTMLVideoElement
, HTMLCanvasElement
, Blob
, ImageData
, ImageBitmap
, or OffscreenCanvas
object.sx
ImageBitmap
will be extracted.sy
ImageBitmap
will be extracted.sw
ImageBitmap
will be extracted. This value can be negative.sh
ImageBitmap
will be extracted. This value can be negative.options
Optional
imageOrientation
: Specifies whether the image should be presented as is or flipped vertically. Either none
(default) or flipY
.premultiplyAlpha
: Specifies whether the bitmap's color channels should be premultiplied by the alpha channel. One of none
, premultiply
, or default
(default).colorSpaceConversion
: Specifies whether the image should be 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 output width.resizeHeight
: A long integer that indicates the output height.resizeQuality
: Specifies the algorithm to be used for resizing the input to match the output dimensions. One of pixelated
, low
(default), medium
, or high
.A Promise
which resolves to an ImageBitmap
object containing bitmap data from the given rectangle.
This example loads a sprite sheet, extracts individual sprites, and then renders each sprite to the canvas. A sprite sheet is an image containing multiple smaller images, each of which you want to be able to render separately.
var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d'), image = new Image(); // Wait for the sprite sheet to load image.onload = function() { Promise.all([ // Cut out two sprites from the sprite sheet createImageBitmap(image, 0, 0, 32, 32), createImageBitmap(image, 32, 0, 32, 32) ]).then(function(sprites) { // Draw each sprite onto the canvas ctx.drawImage(sprites[0], 0, 0); ctx.drawImage(sprites[1], 32, 32); }); } // Load the sprite sheet from an image file image.src = 'sprites.png';
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'createImageBitmap' in that specification. | Living Standard |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 50 | No | 42
|
No | Yes | No |
options parameter | 52 | No | ? | No | 39 | No |
resizeWidth, resizeHeight, and resizeQuality | 54 | No | ? | No | Yes | No |
SVGImageElement as source image | 59 | No | ? | No | Yes | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 50 | 50 | ? | ? | Yes | ? | ? |
options parameter | 52 | 52 | ? | ? | 39 | ? | ? |
resizeWidth, resizeHeight, and resizeQuality | 54 | 54 | ? | ? | Yes | ? | ? |
SVGImageElement as source image | 59 | 59 | ? | ? | Yes | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap