self.createImageBitmap()

createImageBitmap 方法存在 windows 和 workers 中. 它接受各种不同的图像来源, 并返回一个Promise, resolve为ImageBitmap. 可选地参数,图像被剪裁成自（sx，sy）且宽度为sw,高度为sh的像素的矩形。

Syntax

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

Parameters

image
一个图像源, 可以是一个 <img>, SVG <image>, <video>, <canvas>, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, Blob, ImageData, ImageBitmap, 或 OffscreenCanvas 对象.
sx
裁剪点x坐标.
sy
裁剪点y坐标.
sw
裁剪宽度,值可为负数.
sh
裁剪高度,值可为负数.
options 可选
为其设置选项的对象。可用的选项是:
  • imageOrientation: 指示图像是按原样呈现还是垂直翻转.  none (默认不翻转) 或 flipY.
  • premultiplyAlpha: 指示位图颜色通道由alpha通道预乘. 选择其一:none, premultiply, 或 default (默认).
  • colorSpaceConversion: 指示图像是否使用色彩空间转换进行解码. none 或 default (默认). The value default indicates that implementation-specific behavior is used.
  • resizeWidth: 指示新宽度的长整数。
  • resizeHeight: 指示新高度的长整数。
  • resizeQuality: 指定图像缩放算法. 选择其一pixelated, low (默认), medium, 或 high.

Return value

返回一个解决ImageBitmap的Promise ，当Promise成功时resolves接收一个包含所得到的矩形的位图数据ImageBitmap。

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
createImageBitmap		 Living Standard  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

42 (42)
52 (52)[1]

 未实现 未实现 (Yes) 未实现
options parameter 52 ? 未实现 未实现 39 未实现
resizeWidth, resizeHeight, and resizeQuality 54 ? 未实现 未实现 ? 未实现
SVGImageElement as source image 59 ? 未实现 未实现 ? 未实现
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