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>

运行效果如下

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.