将base64格式的编码转为blob形式，对div盒子进行截图

一、div盒子截图

1、下载依赖包（html2canvas）

npm i html2canvas

2、引入并使用

// 导入html2canvas库
import html2canvas from 'html2canvas';

// 获取要截图的div元素
const divElement = document.getElementById('yourDivId');

// 使用html2canvas对div进行截图
html2canvas(divElement).then(canvas => {
  // 将截图生成的Canvas元素转换为图像数据URL
  const imageDataURL = canvas.toDataURL();

  // 在控制台打印截图数据URL，你可以根据需求处理或展示该截图
  console.log(imageDataURL);
});

3、此时imageDataURL的数据格式为

 其实这种形式就可以直接回显

 <img :src="回显的变量" alt="" />

二、转化为blob形式

1、拿到需要的数据结构

let base64String = "数据字符串";

从请求或其他地方获取Base64编码的字符串，必须是纯base64编码的字符串

上述第三点的数据格式需要再加工，如下

// 分割正确的base64位
        let arr = imgurl.split(";")[1].split(",");

2、将其转换为blob格式 

       // 转化为blob形式
        let base64String = arr[1];
        let byteString = atob(base64String);
        let buffer = new ArrayBuffer(byteString.length);
        let view = new Uint8Array(buffer);
        for (let i = 0; i < byteString.length; i++) {
          view[i] = byteString.charCodeAt(i);
        }
        let blob = new Blob([buffer], { type: "image/png" });

此时数据格式为：

 

3、回显Blob对象

通过调用URL.createObjectURL()方法将Blob对象转换为URL，并将其赋给img标签的src属性即可

 let str = URL.createObjectURL(blob);

此时数据格式为：

 4、注意

使用URL.createObjectURL()创建的Blob URL只在当前会话中有效，并且仅对生成Blob URL的页面可见。如果你尝试在不同页面或不同会话中使用Blob URL，可能会遇到找不到文件的错误。