12.15 HTML Canvas图像加载

前面的章节讲述了如何将画布导出为图像，将它保存到本地和与他人共享。现在，我们将学习如何实现完全相反的操作：将图像加载到画布中。介绍这个功能的主要原因是，它使我们能够用2D渲染上下文方法对原本不是在画布中创建的图像进行处理。我们还可以使用几种特殊的像素处理方法，对图像执行一些有趣的特殊操作。

在画布中进行像素处理实际上并不要求真加载图像，如照片。相反，画布本身就是作为图像进行处理的，这意味着你在上面绘制的所有内容都可以使用本章介绍的方法进行处理。

将图像加载到画布中实际上与绘制图像一样简单——只涉及一个方法。在调用drawlmage方法时，至少需要三个参数：所绘制的图像和图像绘制位置的（x，y）坐标。这个方法的完整形式是：

context.drawImage(image, x, y); 

参数image可以是HTML img元素、HTML5 canvas元素或HTML5 video元素。不仅局限于图像让画布的前景更加光明。后面我们还将学习如何在画布中使用和操作HTML5 video元素。

实际上，drawlmage方法有两种调用方式，这两种方式所使用的参数个数是不同的。我们将在下一节详细介绍这两种方式。

首先，让我们使用与HTML文件位于相同目录的一个图像（如图1所示），将一个HTML img元素绘制到画布中。

var image = new Image();
image.src = "example.jpg"; 
$(image).load(function()
{
context.drawImage(image, 0, 0);
}); 

这里所做的第一件事是使用Image类为HTML img元素赋一个空的DOM对象。 然后，通过把它的src属性设置为一个有效的图像文件路径，就可以将该图像加载到图像元素中， 这就好像是设置了HTML img元素的src属性。实际上这创建了一个普通的HTML img元素，但是并没有将它显示在浏览器上。 如果只希望给画布传递一个图像，而实际上不将它添加到HTML代码中，那么就可以使用这种方法。 如果你就是想要看到这个HTML图像，那么完全可以跳过这些步骤，将image变量的值赋给现有HTML img元素的DOM对象。

在这个例子中，我们使用的是本地存储的图像文件，但是只要愿意，你也可以轻松地加载其他网站的图像。然而，使用外部图像需要注意会引起跨域访问问题。

最后要做的一件事是将这个图像对象传递给2D渲染上下文的drawlmage方法，但是在这之前，我们需要确认这个图像已经完全加载。 为此，可以使用jQuery的load方法，它是在一个元素完全加载后触发load事件时调用的方法，load事件只有当所有内容（包括图像）完成加载之后才会触发。 直接将jQuery的load方法赋给图像对象，就可以保证我们只需要等待这个图像的加载完成，而不需要等待其他内容的加载。

现在，我们知道这个图像在什么时候完成加载，我们将drawlmage方法置于load事件被触发之后运行的回调事件中。drawlmage方法的参数就是刚刚创建的图像对象，以及绘制图像的原点（x，y）坐标值。 如果一切正常，我们就能够将图像绘制到画布上，尽管图像被剪掉一部分（参见图1）。然而，不需要担心，因为剪掉的原因是画布小于所绘制的图像尺寸，而图像是以完整尺寸绘制的。

在这个例子中，画布的宽高分别为300px和220px，而示例图像宽度为394px，高度为284px。图像超出画布的部分不可见。下一章节，我们将介绍一些方法来让图像适应画布尺寸。