vue2 搭配 html2canvas 截图并设置截图时样式(不影响页面) 以及 base64转file文件上传 或者下载截图 小记

下载

npm install html2canvas --save

引入

import html2canvas from "html2canvas";

 

//使用

html2canvasForChars() {  
  // 使用that来存储当前Vue组件的上下文，以便在回调函数中使用  
  let that = this;  
    
  // 获取DOM中id为"charts"的元素，需要截图的元素  
  let node = document.getElementById("charts");  
    
  // 返回一个Promise对象，用于异步处理html2canvas的调用  
  return new Promise((resolve, reject) => {  
    // 使用Vue的$nextTick方法确保DOM更新完成后再执行html2canvas  
    that.$nextTick(() => {  
        
      // 调用html2canvas函数，传入node元素和相关配置  
      html2canvas(node, {  
        useCORS: true, // 允许跨域图片  
        // 以下两行被注释，因为它们被固定尺寸替代  
        // height: node.offsetHeight, // 自动获取高度（现在使用固定高度）  
         // width: node.offsetWidth, // 自动获取宽度（现在使用固定宽度）
        //scale: 2.82, // 缩放比例 这个数值根据具体需求调整
        width: 270, // 设置canvas的宽度为270    画布的宽度
        height: 200, // 设置canvas的高度为200   画布的高度
        scrollY: 0, // 忽略Y轴滚动  
        scrollX: 0, // 忽略X轴滚动  
        onclone: function (documentClone) {  

          // 在html2canvas克隆的DOM上修改样式  
          // 对克隆的#charts元素应用缩放和背景色 
            //在此设置样式 不影响页面 
          documentClone.getElementById("charts").style.transform = "scale(0.5)";  
          documentClone.getElementById("charts").style.backgroundColor = "#2c2c32";
  
        },  
      })  
      // html2canvas执行成功后的回调   在此可实现 下载 或其他操作
      .then((canvas) => {  
            //下载
            //link.setAttribute('download', '分享海报') // 设置下载名称
			//link.href = canvas?.toDataURL('image/png', 1) // 转换为png格式
			//link.click()

            //展示
            // 将canvas转换为png格式的图片URL  
            let imgUrl = canvas.toDataURL("image/png");  
            that.Thumbnail = imgUrl;  //现在已经可以展示到页面上了
        
      })  
      // html2canvas执行失败的回调  
      .catch((err) => {  
        // 捕获错误并拒绝Promise  
        reject(err); // 处理生成 canvas 失败的情况  
      });  
    });  
  });  
},

上面显示了展示和下载的方法 展示的话一般是搭配上传(将当前截图上传到服务器) 但是后端规定的上传格式如何不是base64的话 我们需要转化成file对象 创建formdata 对象上传

1. base64z转 file文件

  // 生成随机数 这一步是避免傻逼后端直接用我们规定的文件名缓存 到时候会有重名的文件
    generateRandomString(length) {
      // 定义允许的字符集
      const characters = "abcdefghijkmnopqrstuvwxyz23456789"; // 去除容易混淆的字符
      let result = "";
      const charactersLength = characters.length;
      for (let i = 0; i < length; i++) {
        result += characters.charAt(
          Math.floor(Math.random() * charactersLength)
        );
      }
      return result;
    }, 

  // base64转化为file文件
    base64ToFile(dataurl) {
      // 随机数作为图片名称
      let radom = this.generateRandomString(16);
      let filename = radom + ".png";
      // 获取到base64编码
      const arr = dataurl.split(",");
      // 将base64编码转为字符串
      const bstr = window.atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n); // 创建初始化为0的，包含length个元素的无符号整型数组
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {
        type: "image/png",
      });
    },

//使用
     // 上传缩略图图片
    uploadScreenshot(path) {
      let that = this;
      return new Promise((resolve, reject) => {
        if (path != null) {
//转换
          let file = that.base64ToFile(path);
          let data = new FormData();
          data.append("imageFile", file);
          that.axios
            .post(
              window.global.uploadAddress + "/file/upload/image?type=" + "grid", data, {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )........

好了 下课