this.$nextTick(() => {// 使用$nextTick，解决数据还没有渲染到html就先转为图片，此时的图片会是空内容的问题// var canvas2 = document.createElement('canvas');// const _canvas = document.getElementById('downloadCardDiv');// var w = parseInt(window.getComputedStyle(_canvas).width);// var h = parseInt(window.getComputedStyle(_canvas).height);// var w = _canvas.offsetWidth;// var h = _canvas.offsetHeight;const canvas = document.createElement('canvas') // 创建一个canvas节点const shareContent = document.getElementById('downloadCardDiv') // 需要截图的包裹的（原生的）DOM 对象const width = shareContent.offsetWidth // 获取dom 宽度const height = shareContent.offsetHeight // 获取dom 高度const scale = 2 // 定义任意放大倍数 支持小数canvas.getContext('2d').scale(scale, scale) // 获取context,设置scaleconst rect = shareContent.getBoundingClientRect() // 获取元素相对于视口的const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度this_.html2canvas(document.getElementById('downloadCardDiv'), {// 转换为图片x: rect.left, // 绘制的dom元素相对于视口的位置y: rect.top,// scrollX: scrollTop,// 滚动的长度scrollY: -scrollTop,scale: scale, // 添加的scale 参数width: width, // dom 原始宽度height: height,useCORS: true, // 开启跨域dpi: window.devicePixelRatio * 2}).then(canvas => {const context = canvas.getContext('2d')// 关闭抗锯齿context.mozImageSmoothingEnabled = falsecontext.msImageSmoothingEnabled = falsecontext.imageSmoothingEnabled = falseconst imgUrl = canvas.toDataURL('image/png');this.dataURL = imgUrl;// console.log('下载图片')var a = document.createElement('a')a.download = this.downloadCardObj.name + '邀请卡'// 设置图片地址a.href = this.dataURL;a.click();// this.$message({message: '下载成功', showClose: true, type: 'success'});this.downloadCarVisible = false;})})
html2canvas偏移和模糊_JavaScript_weixin_30955341的博客-CSDN博客
有疑问可以私信或者评论留言
补充下，本人不是大佬，只是把做项目遇到的问题总结了一下
