Canvas 图像来源 CanvasImageSource

上一章节中我们讲解了如何绘制图像，也顺带提到了图像必须是 CanvasImageSource

我们没有具体讲 CanvasImageSource 是什么，如何获取它

本章节我们就来讲讲这个神秘的 CanvasImageSource

Canvas CanvasImageSource

其实，CanvasImageSource 是一个辅助类型，它不是一个接口，也没有对象实现它

它只用于描述下面类型的任何一个对象

1. HTMLImageElement
2. HTMLVideoElement
3. HTMLCanvasElement
4. CanvasRenderingContext2D
5. ImageBitmap

那么这 5 个对象是什么呢？

前三个对应着 HTML 中相应的元素

HTMLImageElement   ===> <img>
HTMLVideoElement   ===> <video>
HTMLCanvasElement  ===> <canvas>

第四个 CanvasRenderingContext2D 就是另一个渲染上下文 ctx

也就是说，我们讲一个 Canvas 的上下文绘制到另一个上下文中
第五个 ImageBitmap 位图资源，我们后面会讲

绘制图片的步骤

其实这个本该不用讲的，但是我觉得还是讲讲为好？

绘制图片的步骤是什么呢？

不就是使用 drawImage() 将图像资源绘制到画板上吗？

问题来了，如何获取图像资源呢？

刚刚不是说过了吗？图像资源是一个 CanvasImageSource

那要如何获取 CanvasImageSource 呢？

它不就是刚刚说的 5 个对象吗

那 5 个对象具体是什么呢？又包括哪些？又如何获取呢？

这....

不用着急，我们一点一点来讲解这些图像资源

HTMLImageElement

HTMLImageElement 其实就是 HTML 中的 <img> 元素

会点 HTML 的都知道, HTML 中的 <img> 有两种创建方式

使用 <img src="..." /> 标签写在 HTML 文档中
使用 JavaScript 脚本 document.createElement("img") 创建出来的

现在主流的浏览器还支持第三种 new Image() 方法

1. <img src="..." />

我们先来讲讲第一种创建的图像资源的获取，因为它是 HTML 文档的一部分，所以有以下三种方式

使用 document.images 获取所有图片集合
使用 document.getElementsByTagName() 获取特定标签下的图片
如果知道了想使用的指定图片的 id ，可以用 document.getElementById() 获得这个图片

比如下面这张图片，我们设置它的 id 为 img1

那么我们就可以使用下面的方式绘制到画板上

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="200" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
var img = document.getElementById("img1");
ctx.drawImage(img, 10, 10);
</script>

2. 使用 `new Image()` 或 `document.createElement("img")` 方法

这两个方法返回的结果是一样的, 都是一个 HTML DOM HTMLImageElement 对象，而且它们的方法和属性也几乎一模一样

我们可以通过下这种方式获得一个 img 对象并将它们绘制到画板上

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="300" height="200" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
var img = document.createElement("img");
var img = new Image();
img.onload = function() {
    ctx.drawImage(this, 10, 10);
}
img.src = "https://www.twle.cn/static/i/meimei_160x160.png";
</script>

3. 通过 data: url 方式嵌入图像

有时候我们可能从某些地方获得了一张图片的数据，比如 HTML 的文件选择框，这种数据的格式是 Base64 编码的字符串的

比如这个

data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==

我们可以直接将数据赋值给 image 对象的 src 属性就可以了

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-3" width="300" height="200" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-3");
var ctx = c.getContext("2d");
var img = document.createElement("img");
var img = new Image();
img.onload = function() {
    ctx.drawImage(this, 10, 10);
}
img.src = "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
</script>

HTMLVideoElement

HTMLVideoElement 其实就是 HTML 中的 <video> 元素

<video> 同样也有两种创建方式

使用 <video src="..." /> 标签写在 HTML 文档中
使用 JavaScript 脚本 document.createElement("video") 创建出来的

两种方式都和 HTMLImageElement 一样，我们就不分讲了，用一个范例来演示一下

比如下面这个视频，我们把它的 id 设置为 video1

那么我们就可以像下面这种方式使用它

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-4" width="300" height="200" style="border:1px solid #ccc">
</canvas>
<script>
var c   = document.getElementById("canvas-4");
var ctx = c.getContext("2d");
var video = document.createElement("video");
video.src = "https://www.twle.cn/static/i/html/html_video_2.mp4";
video.oncanplay = function() {
     ctx.drawImage(this,10,10);  
}
</script>

更多知识我们将在下一章节讲述...

← Canvas 绘制图像 drawImage() Canvas 播放视频 →

简单教程

Canvas 图像来源 CanvasImageSource

Canvas CanvasImageSource

绘制图片的步骤

HTMLImageElement

1. <img src="..." />

2. 使用 `new Image()` 或 `document.createElement("img")` 方法

3. 通过 data: url 方式嵌入图像

HTMLVideoElement

Canvas 基础教程

Canvas 图像来源 CanvasImageSource

Canvas CanvasImageSource

绘制图片的步骤

HTMLImageElement

1. <img src="..." />

2. 使用 new Image() 或 document.createElement("img") 方法

3. 通过 data: url 方式嵌入图像

HTMLVideoElement

Canvas 基础教程

2. 使用 `new Image()` 或 `document.createElement("img")` 方法