window方法:createImageBitmap()

2018-08-09 11:37 更新

createImageBitmap()方法

该createImageBitmap方法存在于window和worker的全局中。它接受各种不同的图像源,并返回一个解决ImageBitmap的Promise。可以选择将源裁剪为源自(sx,sy)的像素矩形,其宽度为sw,高度为sh。

createImageBitmap方法语法

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

参数

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。

返回值

一个Promise,它解析为包含给定矩形的位图数据的ImageBitmap对象。

createImageBitmap()方法示例

var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();

image.onload = function() {
  Promise.all([
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 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
 

浏览器兼容性

新的兼容性表格处于测试阶段

电脑端 移动端
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview Chrome for Android
Edge Mobile Firefox for Android
Opera for Android
iOS Safari
基本支持 支持:50 不支持 支持:42 不支持
支持 不支持
支持:50 支持:50 支持
选项参数 支持:52 不支持
不支持
支持:39 不支持
支持:52 支持:52 支持:39
resizeWidth,resizeHeight和resizeQuality 支持:54 不支持
不支持
不支持
支持:54 支持:54
作为源图像的SVGImageElement 支持:59 不支持
不支持
不支持
支持:59 支持:59
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号