html2canvas转base64前端实现步骤

实现 HTML 转换为 Base64 图片的流程如下：

1. 安装 html2canvas 库

你需要在前端项目中安装 html2canvas 库，可以使用 npm 或 yarn 进行安装，如下所示：

// 使用npm进行安装
npm install html2canvas --save

// 使用yarn进行安装
yarn add html2canvas

2. 引入 html2canvas 库

在需要使用 html2canvas 的组件中，引入 html2canvas 库，如下所示：

import html2canvas from 'html2canvas';

3. 获取需要转换的 HTML 元素

使用 document.querySelector() 方法获取需要转换为 Base64 的 HTML 元素，如下所示：

const element = document.querySelector("#target-element");

4. 使用 html2canvas 将 HTML 转换为 Canvas

使用 html2canvas 将获取到的 HTML 元素转换为 Canvas，如下所示：

html2canvas(element).then(canvas => {
  // canvas为转换后的Canvas对象
});

5. 将 Canvas 转换为 Base64

使用 Canvas.toDataURL() 方法将转换后的 Canvas 对象转换为 Base64 图片，如下所示：

const base64Image = canvas.toDataURL('image/png');

最终得到的 base64Image 就是转换后的 Base64 图片。