self.createImageBitmap() - Web API 接口参考 编辑

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!

• Desktop
• Mobile

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

• CanvasRenderingContext2D.drawImage()
• ImageData