canvasbase64详解_千锋教育

一、canvas是什么

Canvas是一个HTML5标签，可以用来绘制图形、动画、甚至是视频。使用Canvas，你可以基于用户的事件动态地生成图像，例如游戏或数据可视化，也可以将其用作简单的图像编辑器或者成为一个复杂应用的重要组件。

在Canvas中，绘制是由Javascript覆盖到特定区域中的基础图形初始化而完成的。每一个Canvas元素有一个2D渲染内容区域。这里可以通过Javascript来绘制图像。

二、base64是什么

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，大家实际上可以将Base64理解为一种编码格式、而非加密算法。Base64编码将3个字节的二进制数据编码成4个字节的文本数据，长度增加33%。

Base64常用于在HTTP协议下传输HTTP认证信息，因为一些特殊字符没有被HTTP协议允许直接传输，所以进行Base64编码。

三、canvasbase64的基本原理

Canvas中我们可以使用toDataURL()方法将Canvas图像转换为一个base64图片。toDataURL()方法返回的是Canvas元素的一个数据地址。该地址包含了Canvas图像的基本信息，标志了该图像类型、尺寸等内容，并且以base64的形式显示了Canvas图像的具体内容。

使用Canvas+base64的组合，我们可以轻松地将Canvas图像转换为base64图片，并按需传输或者展示。

四、canvasbase64的特点与用途

Canvasbase64具有以下几个特点：

1、base64编码后的图片可以嵌入HTML或者CSS文件中，实现无缝展示。

2、base64编码后的图片不需要额外的下载，节省了图片下载的网络开销。

3、base64编码后的图片可以直接使用Javascript加载，实现异步加载。

Canvasbase64主要应用于以下场景：

1、生成二维码。


let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
QRCode.toCanvas(canvas, "Hello World", function (error) {
  if (error) console.error(error);
});
let imgData = canvas.toDataURL("image/png");

2、绘制海报。


let img = new Image();
img.crossOrigin = "";
img.src = "http://www.mobiletrain.org/2023/1123/1700715002105.png";
img.onload = function () {
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");
  canvas.width = img.width;
  canvas.height = img.height;
  context.drawImage(img, 0, 0);
  context.font = "18px Arial";
  context.fillText("Example", 10, 50);
  let imgData = canvas.toDataURL("image/png");
};

3、实现手写板。


let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = 5;
let drawing = false;
canvas.addEventListener("mousedown", function (event) {
  drawing = true;
  context.beginPath();
  context.moveTo(
    event.pageX - canvas.offsetLeft,
    event.pageY - canvas.offsetTop
  );
});
canvas.addEventListener("mousemove", function (event) {
  if (!drawing) return;
  context.lineTo(
    event.pageX - canvas.offsetLeft,
    event.pageY - canvas.offsetTop
  );
  context.stroke();
});
canvas.addEventListener("mouseup", function (event) {
  drawing = false;
});

五、canvasbase64的示例代码

下面我们来看一个完整的Canvasbase64实现过程的示例代码：


// HTML


// JavaScript
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
context.fillStyle = "#fff";
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = "30px Arial";
context.fillStyle = "#000";
context.fillText("Hello World", 50, 100);
let imgData = canvas.toDataURL("image/png");
let imgElement = document.createElement("img");
imgElement.src = imgData;
document.body.appendChild(imgElement);