ImageBitmapFactories.createImageBitmap()
The createImageBitmap
method 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
JavaScript
Copy Code
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>
,<video>
, or<canvas>
element, aBlob
,ImageData
orCanvasRenderingContext2D
object, or anotherImageBitmap
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. Eithernone
(default) orflipY
.premultiplyAlpha
: Indicates that the bitmaps color channels are premultiplied by the alpha channel. One ofnone
,premultiply
, ordefault
(default).colorSpaceConversion
: Indicates whether the image is decoded using color space conversion. Eithernone
ordefault
(default). The valuedefault
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 ofpixelated
,low
(default),medium
, orhigh
.
Return value
A Promise
which resolves to an ImageBitmap
object containing bitmap data from the given rectangle.
Example
JavaScript
Copy Code
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 |
---|---|---|
WHATWG HTML Living Standard The definition of 'createImageBitmap' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 50.0 | 42 (42) | ? | (Yes) | ? |
options parameter |
52.0 | ? | ? | 39 | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | No support | 50.0 | 42.0 (42) | ? | (Yes) | ? | 50.0 |
options parameter |
No support | 52.0 | ? | ? | 39 | ? | 52.0 |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/imagebitmapfactories/createimagebitmap