下面是我原来的写法，这个写法原来并没有问题，但后面出现图片不完整+ 白屏+ 偏移（下面附有解决方法）
要截图的区域（截取 <div ref="imageToFile" id="imageToFile"> <van-col :span="24" class="topPage" :style="{backgroundImage:'url(' + backImg + ')'}" > <img class="vanimage" :src="img | getImgById"> <div v-if="titleshow" class="redTitle">{{title}}</div> </van-col> <div style="clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;"></div> </div> 事件（截取 setTimeout(()=>{ html2canvas(this.$refs.imageToFile, { width: this.$refs.imageToFile.firstChild.offsetWidth, height: this.$refs.imageToFile.firstChild.offsetHeight, useCORS: true }).then((canvas) => {// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等 this.images[0] = canvas.toDataURL('image/png'); }) }, 200)错误图片： ——— 原因可能是html2canvas留的坑———— 解决方法：在生成图片之前先进行操作
window.scroll(0,0) // 首先先顶部 const targetDom = document.querySelector("#imageToFile") // 获取要截图的元素 const copyDom = targetDom.cloneNode(true) // 克隆一个 copyDom.style.width = targetDom.scrollWidth + 'px' copyDom.style.height = targetDom.scrollHeight + 'px' document.body.appendChild(copyDom) // 添加 setTimeout(()=>{ html2canvas(copyDom, { width: targetDom.scrollHeight, height: targetDom.scrollHeight, useCORS: true }).then((canvas) => { document.body.removeChild(copyDom) // 用完要删除 this.images[0] = canvas.toDataURL('image/png'); }) }, 200)但做完之后发现样式变了，这是因为我把class写在大的class里，把class单独移动出来即可。 （class错误在大的class里时，完成图的东西没有样式，比如右边就没有红色背景等全部样式） 完成图： 参考文章： https://www.jianshu.com/p/7d98ace248fd（这里还提到了其他问题）
