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",},})........好了 下课
2024-08-02补充 上面提供的代码截图尺寸有问题下面是优化代码
html2canvasForChars() {let that = this;let node = document.getElementById("charts");return new Promise((resolve, reject) => {that.$nextTick(() => {console.log(node, "node");html2canvas(node, {useCORS: true,backgroundColor: null, //背景 色有时候为白色的异常 设为null就不会出现那种问题width: node.offsetWidth, //canvas 画布宽度height: node.offsetHeight, //canvas 画布高度windowWidth: node.scrollWidth, //渲染 Element 时要使用的窗口宽度windowHeight: node.scrollHeight, //渲染 Element 时要使用的窗口高度scrollY: 0,scrollX: 0,scale: 1, // 用于渲染的比例onclone: function (documentClone) {// 以下是对克��的 canvas 进行操作documentClone.getElementById("charts").style.transform ="scale(1)";},}).then((canvas) => {// var url = canvas.toDataURL(); // 图片地址let imgUrl = canvas.toDataURL("image/png");console.log(imgUrl, "imgUrl");// 暂存图片变量that.Thumbnail = imgUrl;that.configObj.thumbnail_url = imgUrl;}).catch((err) => {reject(err); // 处理生成 canvas 失败的情况});});});},主要就是 这个代码 和那个背景颜色白色异常的 设置background设置为null会解决背景色为白色的异常
documentClone.getElementById("charts").style.transform ="scale(1)";