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

好了 下课