在 Canvas 图像来源 CanvasImageSource 章节中我们有提到可以使用 ImageBitmap 作为 drawImage() 的图像来源

ImageBitmap

ImageBitmap 是什么呢？

ImageBitmap 是一个高性能的位图，可以低延迟地绘制，它可以从前几章节中学到的所有源以及其它几种源中生成

什么意思呢？

也就是说，ImageBitmap 可以从一张图片，比如 png,jpg,gif 中生成，也可以从 ,, 中生成

简直就是 海纳百川，有容波大 啊

那它到底是怎么生成的呢？

ImageBitmap 使用 createImageBitmap() 工厂方法模式，从多种源中生成

createImageBitmap() 方法

createImageBitmap() 方法是 window 对象的一个方法

不过这个方法很坑，很多浏览器不支持

Yes

不支持

49+

不支持

基本属性

createImageBitmap 接受各种不同的图像来源, 并返回一个 Promise,

语法

createImageBitmap(image[, options]).then(function(response) { ... });

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

参数

说明

image

一个图像源

sx

裁剪点 x 坐标

sy

裁剪点 y 坐标

sw

裁剪宽度,值可为负数

sh

裁剪高度,值可为负数

options

可选，一个字典，由于设置各种选项

image 参数

image 参数是一个图像源，可以是以下资源

SVG

HTMLImageElement

SVGImageElement

HTMLVideoElement

HTMLCanvasElement

Blob

ImageData

ImageBitmap

OffscreenCanvas

几乎囊括了所有可绘制对象

option 参数

可选，一个字典，由于设置各种选项，可用的选项有

选项

说明

imageOrientation

指示图像是按原样呈现还是垂直翻转，可选的值有:

none (默认,不翻转)

flipY

premultiplyAlpha

指示位图颜色通道由 alpha 通道预乘，可选的值有

none

premultiply

default (默认)

colorSpaceConversion

指示图像是否使用色彩空间转换进行解码

none

default (默认)

resizeWidth

缩放到新的宽度

resizeHeight

缩放到新的高度

resizeQuality

指定图像缩放压缩质量，可选的值有

pixelated

low (默认)

medium

high

返回值

返回一个 Promise ，参数 resolve 为一个 ImageBitmap 对象

ImageBitmap 属性和方法

ImageBitmap 具有以下属性和方法

属性

说明

height

只读，正整数，以 px 为单位的图像高度

width

只读，正整数，以 px 为单位的图像的宽度

方法

说明

close()

释放 ImageBitmap 所相关联的所有图形资源

范例

我们先准备一张图片，比如 https://www.twle.cn/static/i/meimei_160x160.png

我们先使用 createImageBitmap() 方法裁剪出图片 (10,10) 开始的 100x100 大小的部分

然后使用 drawImage(bitmap) 绘制到画布 (50,50) 的位置上

var c = document.getElementById("canvas-1");

var ctx = c.getContext("2d");

image = new Image();

image.onload = function() {

Promise.all([

createImageBitmap(this, 10, 10, 100, 100),

]).then(function(sprites) {

ctx.drawImage(sprites[0], 50, 50,sprites[0].width,sprites[0].height);

});

}

image.src = 'https://www.twle.cn/static/i/meimei_160x160.png';

运行效果如下