← Canvas 绘制另一个 Canvas Canvas 几何变换 →

Canvas 绘制位图图像 ImageBitmap

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

ImageBitmap

ImageBitmap 是什么呢？

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

什么意思呢？

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

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

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

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 参数是一个图像源，可以是以下资源

<img>
SVG <image>
<video>
<canvas>

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) 的位置上

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
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';
</script>

运行效果如下