HTML Canvas 绘制 Base64 图像 - JavaScript

在 HTML5 中， 元素可以用来绘制图形，动画和图像等。同时也支持使用 Base64 编码的图片进行绘制。下面将介绍如何在 JavaScript 中使用 HTML Canvas 绘制 Base64 图像。

1. 基本概念

1.1 Base64 编码

Base64 是一种将二进制数据编码成 ASCII 字符的编码方式。使用 Base64 编码后的数据只包含 A-Z、a-z、0-9、+、/ 这些字符。Base64 编码可以用于图片、文件等二进制数据的传输.

1.2 Canvas

Canvas 是 HTML5 中的一个功能强大的元素，可以创建出来一个绘画区域，用 JavaScript 进行绘图。除了绘制简单的图形，还可以在 Canvas 上绘制图片，包括 Base64 编码的图片。

2. 使用方式

2.1 图片加载

在绘制 Base64 图像之前，首先需要将 Base64 字符串转换成图片对象。可以使用 JavaScript 的 Image 对象进行加载：

const img = new Image();
img.src = base64String;
img.onload = function(){
  // 图片加载成功后进行绘制
}

2.2 绘制图片

使用 Canvas 的 drawImage 方法可以绘制图片。以下是一个例子：

const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;

const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);

const dataUrl = canvas.toDataURL();

在上面的例子中，首先创建了一个 Canvas 元素，并设置了它的宽度和高度。然后获取了 Canvas 的 2D 上下文对象，使用 drawImage 方法将图片绘制在 Canvas 上。最后使用 toDataURL 方法将 Canvas 转换成 Base64 编码的字符串。

3. 总结

HTML Canvas 绘制 Base64 图像是一种非常便捷的方式，只需要将 Base64 字符串转换成图片对象后，使用 Canvas 的 drawImage 方法进行绘制即可。需要注意的是，在使用 Canvas 绘制时，需要等图片加载完成后才能进行绘制操作。