WindowOrWorkerGlobalScope接口方法:createImageBitmap()
createImageBitmap()方法
该createImageBitmap方法存在于全局的窗口和 worker 中。它接受各种不同的图像源,并返回一个解析为 ImageBitmap 的 Promise。可选地,源被剪裁成源自(sx,sy)且宽度为 sw 和高度为 sh 的像素的矩形。
createImageBitmap()方法语法
createImageBitmap(image[, options]).then(function(response) { ... });
createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });
createImageBitmap()方法参数
image
- 图像源,其可以是一个
<img>
,SVG<image>
,<video>
,<canvas>
,HTMLImageElement
,SVGImageElement
,HTMLVideoElement
,HTMLCanvasElement
,Blob
,ImageData
,ImageBitmap
,或OffscreenCanvas
对象。 sx
要从中提取 ImageBitmap 的矩形的参照点的 x 坐标。
sy
- 将从中提取 ImageBitmap 的矩形的参考点的 y 坐标。
sw
- 将从中提取 ImageBitmap 的矩形的宽度。该值可能是负值。
sh
- 将从中提取 ImageBitmap 的矩形的高度。该值可能是负值。
- 可选的选项
- 为其设置选项的对象。可用的选项是:
imageOrientation
:指示图像是按原样呈现还是垂直翻转。可以是none
(默认)也可以是flipY
。premultiplyAlpha
:表示位图颜色通道由 alpha 通道预乘。可以说其中之一:none
,premultiply
或default
(默认)。colorSpaceConversion
:指示图像是否使用颜色空间转换进行解码。可以是none
或者default
(默认)。该值default
表示使用了特定于实现的行为。resizeWidth
:表示新宽度的长整数。resizeHeight
:一个长整数,表示新的高度。resizeQuality
:指定图像缩放算法。可以是其中之一:pixelated
,low
(默认)medium
,或high
。
createImageBitmap()方法返回值
createImageBitmap()方法返回一个 Promise,它解析为包含给定矩形中的位图数据的 ImageBitmap 对象。
createImageBitmap()方法示例
以下是一个createImageBitmap()方法的使用示例:
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';
规范
规范 | 状态 | 注释 |
---|---|---|
HTML Living Standard 该规范中的'createImageBitmap'的定义。 |
Living Standard |
浏览器兼容性
我们正在将兼容性数据转换为机器可读的JSON格式。
- 电脑端
特征 | Chrome |
Firefox(Gecko) |
Edge |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
基本支持 | 支持:50 |
支持:42、52[1] |
不支持 | 不支持 |
支持 | 不支持 |
options 参数 |
支持:52 | ? | 不支持 |
不支持 |
支持:39 | 不支持 |
resizeWidth 、resizeHeight 和resizeQuality
|
支持:54 | ? | 不支持 |
不支持 |
? | 不支持 |
SVGImageElement 作为源图像 |
支持:59 | ? | 不支持 |
不支持 |
? | 不支持 |
- 移动端
特征 | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本支持 | 支持:50 | 支持:50 | 支持:42.0、52.0 [1] | ? | 支持 | ? |
options 参数 | 支持:52 | 支持:52 | ? | ? | 支持:39 | ? |
resizeWidth 、resizeHeight 和resizeQuality | 支持:54 | ? | ? | ? | ? | |
SVGImageElement 作为源图像 | 支持:59 | 支持:59 | ? | ? | ? | ? |
注释:
[1] createImageBitmap() 现在在 WindowOrWorkerGlobalScope mixin 上定义。