Canvas Images
Canvas Images （画布图像）
One of the features of the <canvas> element is the possibility of using images. These can be used for different purposes. You can use external images in any format supported by the browser (e.g., PNG, GIF, or JPEG). As a source, you can also use the image created by other canvas elements.
Importing images into a canvas is a two-step process:
Get a reference to another canvas element or an HTMLImageElement object as a source. Draw an image on the canvas with the drawImage() function. （获取对另一个画布元素或HTMLImageElement对象的引用作为源。 使用drawImage ()函数在画布上绘制图像。）
As an image source, the canvas API can use any of the following data types:
| Data Type | Description |
|---|---|
| HTMLImageElement | These are images created with the Image() constructor, or any <img> element. |
| SVGImageElement | These are images embedded with the <image> element. |
| HTMLVideoElement | An HTML <video> element as an image source takes the current frame from the video and uses it as an image. |
| HTMLCanvasElement | As an image source, you can use another <canvas> element. |
These sources together are referred to by the type CanvasImageSource. （这些源一起被类型CanvasImageSource引用。）
There are many ways to get images for use on canvas. （有很多方法可以获取要在画布上使用的图像。）
Using images from the same page
Using images from the same page （使用同一页面中的图像）
You can get a reference to images on the same page with the canvas with one of the following:
The document.images collection （- document.images集合）
The document.getElementsByTagName() method （- document.getElementsByTagName ()方法）
The document.getElementById() method if you know the ID of the image you want to use （- document.getElementById ()方法，如果您知道要使用的图像的ID）
Using images from other domains
Using images from other domains （使用其他域的图像）
Using the <img> element with the download attribute, you can ask permission to load an image from another domain to use in the call to drawImage(). If the hosting domain allows cross-domain access, you can use the image in your canvas without tainting it.
Using other canvas elements
Using other canvas elements （使用其他画布元素）
Other canvas elements can be accessed using either the document.getElementById() or document.getElementsByTagName() method. （可以使用document.getElementById ()或document.getElementsByTagName ()方法访问其他画布元素。）
Embedding an image via data: URL
Embedding an image via data: URL
Data URLs allow specifying an image as a Base64 encoded string of characters directly in the code. The data URL’s advantage is that the resulting image is available immediately. It is also possible to wrap all your CSS, HTML, JavaScript, and images in one file. （数据URL允许直接在代码中将图像指定为Base64编码的字符串。数据URL的优点是生成的图像立即可用。您也可以将所有CSS、HTML、JavaScript和图像包装在一个文件中。）
However, there is also a disadvantage: the image is not cached, and the encoded url can be too long for larger images.
Creating an image from scratch
Creating an image from scratch （从头开始创建图像）
You can also create a new HTMLImageElement object in your script. For this, use Image() constructor:
var img = new Image(); // Create new img element
img.src = 'myImage.png'; // Set source path
The image will start loading when this script is executed. The script will not do anything if you call drawImage() before the image has finished loading. （执行此脚本时，图像将开始加载。如果在图像加载完成之前调用drawImage () ，脚本将不执行任何操作。）
The drawImage() function
The drawImage() function （DrawImage ()函数）
Once a reference to the source object image is available, you can use the drawImage() method. This method has the following variants:
drawImage(image, x, y), （- drawImage (image, x, y),）
drawImage(image, x, y, width, height), （- drawImage (image, x, y, width, height),）
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). （- drawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)。）
The basic form is drawImage(image, x, y). （基本形式是drawImage (image, x, y)。）
In the following example, we use the document.getElementById() method to get a reference to the image and then use the drawImage() function to draw the image. （在下面的示例中，我们使用document.getElementById ()方法获取对图像的引用，然后使用drawImage ()函数绘制图像。）
Example of drawing an image with the drawImage() function:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Image</h2>
<img id="photo" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
<h2>Image with canvas:</h2>
<canvas id="exampleCanvas" width="240" height="225" style="border:2px solid #cccccc;">
Your browser doesn't support the canvas tag.
（你的浏览器不支持画布！）
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("photo");
ctx.drawImage(img, 20, 20);
};
</script>
</body>
</html>
SVG images must define the width and height in the root <svg> element.
Using frames from a video
Using frames from a video （使用视频中的帧）
It is also possible to use frames from a video that is presented by a <video> element, even when the video is not visible. E.g., if you have a <video> element with the ID “videoCanvas”, do the following:
Example of drawing a video with canvas:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Video</h2>
<video controls id="videoCanvas" controls width="350" autoplay>
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<h2>Canvas draws the current video:</h2>
<canvas id="exampleCanvas" width="310" height="190" style="border:1px solid #d3d3d3;">
Your browser doesn't support the canvas tag.
（你的浏览器不支持画布！）
</canvas>
<script>
var v = document.getElementById("videoCanvas");
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var i;
v.addEventListener("play", function() {
i = window.setInterval(function() {
ctx.drawImage(v, 5, 5, 300, 180)
}, 10);
}, false);
v.addEventListener("pause", function() {
window.clearInterval(i);
}, false);
v.addEventListener("ended", function() {
clearInterval(i);
}, false);
</script>
</body>
</html>