怎么用JavaScript把一张图片装载进Canvas

JavaScript在今天的Web世界里有巨大的影响，Canvas是用JavaScript在网页上画图的一种元素。这篇文章里，我们将向你介绍，如何使用JavaScript将一张已存在的图片加载进canvas，这样我们就可以进一步进行图像处理和像素级操作了。

假设我们有一张图片，像下面这样：

<img id="image1" src="image1.jpg" /> 

首先，我们动态的创建一个canvas对象，并获得2D渲染的上下文（如果你已经有了，可以继续使用它）：

let c = document.createElement("canvas");
ctx = c.getContext('2d');

然后，创建一个Image对象，我们接下来会将上面的图片装载进Image对象，并传递给canvas。

let img1 = new Image(); 

但是我们不能像上面那样，一步步的操作，简单的装载，然后处理。因为下载图片是非阻塞的，JavaScript会立即执行下面一行代码，即使下载操作还没完成。

//THIS WON"T WORK!!
let img1 = new Image();
img1.src = document.getElementById("image1").src;
//continue canvas processing

我们需要绑定onload事件，在图片下载完成后，开始向canvas传递图片数据。像下面这样：

//THIS IS THE CORRECT EXAMPLE
let img1 = new Image();
img1.onload = function () {
//continue canvas procesing after image has been loaded
};
img1.src = document.getElementById("image1").src;

然后，我们将canvas的大小设置为跟图片一样（如果你愿意也可以设置大一点），并使用drawImage函数将图片装载进canvas。

img1.onload = function () {
      c.width = img1.width;
      c.height = img1.height;
      ctx.drawImage(img1, 0, 0);
}

就是这样！图片已经在canvas中等候处理了！