WindowOrWorkerGlobalScope接口方法:createImageBitmap()

2018-03-26 16:33 更新

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>HTMLImageElementSVGImageElementHTMLVideoElementHTMLCanvasElement,  BlobImageDataImageBitmap,或OffscreenCanvas对象。
sx

要从中提取 ImageBitmap 的矩形的参照点的 x 坐标。

sy
将从中提取 ImageBitmap 的矩形的参考点的 y 坐标。
sw
将从中提取 ImageBitmap 的矩形的宽度。该值可能是负值。
sh
将从中提取 ImageBitmap 的矩形的高度。该值可能是负值。
可选的选项
为其设置选项的对象。可用的选项是:
  • imageOrientation:指示图像是按原样呈现还是垂直翻转。可以是none(默认)也可以是flipY
  • premultiplyAlpha:表示位图颜色通道由 alpha 通道预乘。可以说其中之一:nonepremultiplydefault(默认)。
  • colorSpaceConversion:指示图像是否使用颜色空间转换进行解码。可以是none或者default(默认)。该值default表示使用了特定于实现的行为。
  • resizeWidth:表示新宽度的长整数。
  • resizeHeight:一个长整数,表示新的高度。
  • resizeQuality:指定图像缩放算法。可以是其中之一:pixelatedlow(默认)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 不支持
resizeWidthresizeHeightresizeQuality 支持:54 不支持
不支持
不支持
SVGImageElement 作为源图像 支持:59 不支持
不支持
不支持
  • 移动端

特征Android WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持支持:50支持:50

支持:42.0、52.0 [1]

?支持?
options 参数支持:52支持:52??支持:39?
resizeWidth 、resizeHeightresizeQuality支持:54???? 
SVGImageElement 作为源图像支持:59支持:59????

注释:

[1] createImageBitmap() 现在在 WindowOrWorkerGlobalScope mixin 上定义。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号