VUE实现自动截图，保存/上传

前言

截图可以通过使用 html2canvas 库来实现截图功能。这个库可以将HTML页面或某个元素转换为图片

一、使用/安装 html2canvas

项目中安装 html2canvas：npm install html2canvas

二、创建组件

1.截图对象

代码如下（示例）：

<template>
	<div id="targetelement"> // 要截图目标对象
	     ...........                    
	</div>
</template>

获取目标对象：可以id/name/type,当前代码使用 id 获取截取对象

2.截图组建

代码如下（示例）：

screenshotImg(){
    this.$message({ message: '目标对象截图正在执行保存上传，请稍后！', type: 'waring' });
    const element = document.getElementById('targetelement');
        html2canvas(element).then(canvas => {
        // 将Canvas转换为Base64编码
        const baseCode = canvas.toDataURL('image/png');
        // 执行进一步操作，如显示或上传Base64图像
        console.log(baseCode);
        let fileName = 'XXXXXXXXXXXXXXXXXXXXX';
        // 将base64的数据部分提取出来，否则生成的文件无法预览（逗号之后的base64编码）
        const arr = baseCode.split(',');
    });
},

3.超时组件

代码如下（示例）：

setTimeout(() => {
     console.log('等待时间/设置某个组件或函数方发执行完成后');
     ............
 }, 1000); // 等待1秒、

4.base64 转 文件（file）

方法调用：png

代码如下（示例）：

	// 假设你的base64图片字符串是这样的
	const base64Str = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
 
	// 你想要的文件名
	const filename = 'image.png';
   	const file = this.base64ToFile(baseCode, filename);

base64 to file method（file）

代码如下（示例）：

base64ToFile(baseCode, filename) {
    // 将base64的数据部分提取出来
    const arr = baseCode.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    // 将Uint8Array转换为Blob对象
    const blob = new Blob([u8arr], { type: mime });
    // 创建File对象
    const file = new File([blob], filename, { type: mime });
    return file;
  }
  

总结

引入主函数包，获取dom对象。获取base64编码。执行后续功能
代码中使用延时函数，方便页面渲染数据完成。再执行截图组件。
代码中也可不使用前端base64转文件，可直接调用服务端接口，服务端base64转流，调用文件接口保存。