Canvas 图像来源 CanvasImageSource

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

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

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

Canvas CanvasImageSource

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

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

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

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

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

    HTMLImageElement   ===> <img>
    HTMLVideoElement   ===> <video>
    HTMLCanvasElement  ===> <canvas>
    
  2. 第四个 CanvasRenderingContext2D 就是另一个渲染上下文 ctx

    也就是说,我们讲一个 Canvas 的上下文绘制到另一个上下文中

  3. 第五个 ImageBitmap 位图资源,我们后面会讲

绘制图片的步骤

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

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

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

问题来了,如何获取图像资源呢?

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

那要如何获取 CanvasImageSource 呢?

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

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

这....

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

HTMLImageElement

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

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

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

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

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

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

  1. 使用 document.images 获取所有图片集合
  2. 使用 document.getElementsByTagName() 获取特定标签下的图片
  3. 如果知道了想使用的指定图片的 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> 同样也有两种创建方式

  1. 使用 <video src="..." /> 标签写在 HTML 文档中
  2. 使用 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 基础教程

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

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

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