极客笔记HTML 从HTML5 Canvas获取二进制（base64）数据（readAsBinaryString）
在本文中，我们将介绍如何从HTML5 Canvas获取二进制数据，并将其转换为base64格式的数据。
HTML5引入了一个强大的功能：Canvas元素。它允许我们在Web页面上绘制图形，包括图像、形状和文本。Canvas元素本身并不提供直接访问其绘制内容的方法，但我们可以通过将其导出为二进制数据并进行处理来实现这一目标。
HTML5 Canvas提供了toDataURL()方法，该方法可以将Canvas上的绘制内容导出为base64字符串。我们可以使用该方法来获取Canvas上的二进制数据。
下面是一个简单的示例，展示了如何使用toDataURL()方法将Canvas上的绘制内容导出为base64数据：
<!DOCTYPE html>
<html>
<head>
<title>Canvas to Base64</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 在Canvas上绘制一些内容
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
// 导出Canvas内容为base64数据
var base64Data = canvas.toDataURL();
// 在控制台打印base64数据
console.log(base64Data);
</script>
</body>
</html>
在上面的示例中，我们首先创建了一个Canvas元素，并获取了其上下文对象。然后，在Canvas上绘制了一个红色的矩形。接下来，我们使用toDataURL()方法将Canvas上的绘制内容导出为base64数据，并将结果打印到控制台。
通过执行上述代码，您将在浏览器的开发者工具控制台中看到类似于下面的输出：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4nOy9Z5RV5ZXed5909ERlMgQBDhEBEEZTQNAhQQktCBAGTZQ2SDph3f93f0fONLC1Jz1pUlCRukQSQhERARExMWEBmCIiIiIiIgJQDIWiKAq6rCYJK5Z/WFrw1hm5l3nOa9e5D+Z77fHt8+c9rXV1e3zKvXvuzfucB+5q2mzSrf9Zf/QW1oQ+GQ3xbydKmAQIIECAAAECBKmAQ iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAgAElEQVR4nOy9Z5RV5ZXed5909ERlMgQBDhEBEE...（省略部分内容）
从上面的输出中，可以看到base64数据的开头是”data:image/png;base64,”，这表示它是一个PNG图像的base64格式数据。
假设您还想进一步处理这些二进制数据，例如，将其发送到服务器，或者在浏览器中进行特定的操作。在这种情况下，可以使用FileReader对象的readAsBinaryString()方法来读取base64数据的二进制表示。
下面是一个示例，展示了如何使用FileReader对象的readAsBinaryString()方法从base64数据中获取二进制数据：
<!DOCTYPE html>
<html>
<head>
<title>Read Base64 as Binary String</title>
</head>
<body>
<input type="file" id="fileInput">
<script>
// 当文件选择框的值发生变化时触发
document.getElementById("fileInput").addEventListener("change", function(event) {
var file = event.target.files[0];
var reader = new FileReader();
// 当读取操作完成时触发
reader.onload = function(e) {
var binaryString = reader.result;
// 在控制台打印二进制数据
console.log(binaryString);
};
// 读取base64数据
reader.readAsBinaryString(file);
});
</script>
</body>
</html>
在上面的示例中，我们创建了一个文件选择框，并为其添加了一个change事件监听器。当选择了文件后，事件监听器中的代码将读取所选择文件的二进制数据，并将其打印到控制台。
通过执行上述代码，选择一个包含base64数据的文件后，您将在浏览器的开发者工具控制台中看到类似于下面的输出：
PNG
...（省略部分内容）
从上面的输出中，我们可以看到获取到了文件的二进制数据。
阅读更多：HTML 教程
总结
本文介绍了如何从HTML5 Canvas获取二进制数据，并将其转换为base64格式的数据。我们使用了toDataURL()方法将Canvas上的绘制内容导出为base64数据，并通过使用FileReader对象的readAsBinaryString()方法将base64数据转换为二进制数据。这些技术在处理Canvas绘制内容时非常有用，它们使我们能够在浏览器中处理和传输图形数据。希望本文对您理解HTML5 Canvas的二进制数据处理有所帮助。