从头开始学canvas(二) - 导入图片、导出图片、捕捉视频某帧并加载至画布

引言

在上一篇从0开始的canvas学习中，我们介绍了canvas的基本知识，以及canvas在微信小程序中的应用，让我们对canvas有了一个基本的认识。在这篇文章中，我们将重点探讨如何在canvas中导入图片、导出图片、捕捉视频的某一帧以及将图片加载到画布中，并提供一些实用的案例和代码示例。

导入图片

在canvas中导入图片，我们可以使用drawImage()方法。这个方法需要两个参数：第一个参数是图片对象，第二个参数是图片在画布中的位置。

drawImage(image, x, y);

例如，以下代码将一张名为“image.png”的图片导入到画布中，并将其定位在（100, 100）的位置：

const image = new Image();
image.src = 'image.png';
image.onload = function() {
  ctx.drawImage(image, 100, 100);
};

导出图片

要将canvas中的图片导出，我们可以使用toDataURL()方法。这个方法返回一个base64编码的字符串，包含了图片的数据。

const dataURL = canvas.toDataURL();

我们可以将这个字符串保存为一个图片文件，也可以直接将其嵌入到HTML页面中。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADGSURBVGhD7dg9S5PBFMbhmnfe9Z/UmvtR6wvvFeFHRNzJDy8f0GrNVEFCLyS8WvB5uZEGDMiQomTNDw8Q8JEWQyFCMLxiwk0Q0MpGHQ8fU+fHL/v733Ov2+y+13PvOfv/9d37vd8+/b/72H54x/+TPb79z/4F/m7T/88+u/fN/l+z//3/b//A/8V//W/87/9777333nvfe+99T3z/+3/+F/73/9l/8J/8x+8//E/8b/6P/2v/H/5/X9x/f3r3z7u4uU9/9G//k/4Q/+3/gv/d/8Y/+T/g3/83/6j/+h/9z/4///+/93//H/83/+x/+N//7/87/8L/+1/9X/+z/53/5X/63/4n/+3/53/3X/+X/7X/+1/7f/5/+3/8H/6z/+3/93/9T/97/5P/1f/gP/uP/n/x3/2f/v//v//x/+v/tf/oP/4f/yP/1f/gv/dP/4P/xv/EP/8//u/8z/+z/6X/+f/7j/+L/8T/1v/v/8T/57/33/1X/7f/qv/E//j//f/3f/Ef/vv/e//z/87/7v/jP/d/8r/+1/73/2f/0P/vP/gf/3/83/7z/+L/8b/1n/2v/l//L/4f/0P/oP/C/8r/57/3v/1n/cP/9z/3z/+f/97/33/5v/4f/yv/x//DP/83/7z/+7/6z/+L/9z/3L/5v/oP/F/8H/5z/13/mv/fP/9L/3L/4P/y//CP/97/3v/of/6z/+j/8z/7n/0P/u//9z/33/6v/qv/TP/9H/0//vP/8L/3z/+v/87/1v/jP/0//nP/8j/7X/+7/9L/3f/ov/FP/9z/67/9z/33/4v/xv/S//E/9z/3//Ff/9H/4f/2n/x//6P/83/6n/+v/9n/4P/xv/P/9b/3f/HP/83/6L/73/2v/pP/G/8v/6f/yP/x//L/8z/33/6n/+j/9D/7z/+L/8z/73/1f/qv/Jf/9L/3f/Vv/9L/4f/5f/0//lP/9H/3v/vP/9H/7v/h//Pv/9L/67/9X/3v/vP/87/47/8b/7z/+z/9T/33/6v/nv/Q//H/8z/7f/x//Jv/8v/6v/9P/63/87/4f/ov/EP/83/7f/lP/Av/E/8b/7v/nv/hP/CP/9z/33/5X/7v/nf/Jv/97/4L/9D/4P/x//TP/9X/3v/nP/8n/9L/6n/9T/7f/nP/Iv/E/8D/7L/vP/Kf/E/8z/7n/nv/Df/C/9X/6X/7v/rv/BP/9L/7v/x//Jv/8b/4L/93/7f/rv/KP/9z/33/5f/7z/+L/8b/9L/4L/8f/6n/8z/6n/+3/8z/33/5X/73/2P/uP/GP/9L/6z/8n/97/7X/+L/8b/9z/6X/73/1v/xP/DP/9n/3v/of/nP/93/63/9T/3f/FP/87/77/9f/0f/Av/vv/E/8H/9D/6X/9P/4v/1v/rf/nP/8j/7X/+z/8b/7v/lP/TP/9H/3v/HP/9z/33/4f/77/1P/8n/9H/4n/93/3f/vP/87/7v/tf/N/93/77/9L/3f/cP/9T/33/5f/7z/+7/9T/4P/93/63/87/6P/+L/87/4n/9b/13/vP/QP/9L/6X/8n/9D/7v/lP/Gv/Lv/8f/7z/+z/8b/7X/+3/93/4P/8n/9z/7X/+L/8z/33/5X/7z/+L/87/4P/9H/4n/87/6L/+z/8z/6n/+f/9T/6X/+7/9n/4n/8z/7n/+3/8T/7f/gP/Gv/Lv/8v/97/7v/vv/Mf/93/33/5f/77/1f/9T/4f/8z/7v/nP/Df/9H/7f/1f/vf/Iv/83/77/9L/3v/x//FP/8