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 对象上传

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",
},
}
)........

好了下课

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

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