最近接到反馈，先前做的一个小工具会出现一些bug 主要原理是根据用户填写的内容生成一个隐藏起来的节点，并把这个节点截取生成图片下载下来；

首先把这个节点显示出来发现节点是正常的

那么问题就出现在获取节点上，这里使用到了html2canvas将节点转化为 base64 格式的图片，打印一下这个文件： ok, 是空白的；

当页面缩小及生成图片滚动页面时，会出现类似问题，后来发现是页面有滚动条时会出现截图失败； 查阅文档还可以通过获取截图范围的精确位置截图；

我们需要的是截图区域左上角的 x, y 坐标，以及截图区域的宽高；

const dom = $(".creatSign-layout”); x 坐标：dom.offset().left y 坐标：dom.offset().top

在获取节点的 x, y 坐标时，发现用 dom.offsetLeft, dom.offsetTop 位置不准确，原因是：

offsetLeft / offsetTop 在页面任一元素的offsetLeft总是找到离其最近的已经定位的父元素或祖先元素定位，如果没有，就根据根节点body定位，然后获取其left值。

offset().left / offset().top 返回或设置匹配元素相对于文档的偏移（位置）。 无论元素的父元素或祖先元素的position属性是什么，总是计算相对于文档的位置。

以下是使用 html2canvas 生成 canvas，并下载为图片的完整代码：

toImage() { setTimeout(function () { const dom = $(".creatSign-layout”); // 要截取为图片的 dom 节点 const containerDom = $(".router-view-content"); console.log( dom.offset(),'num') html2canvas(document.querySelector(".creatSign-layout"), { scale: 2, dpi: 300, x: dom.offset().left, y: dom.offset().top, width: 556, height: 168, removeContainer:true }).then(function (canvas) { let dataURL = canvas.toDataURL("image/jpg"); console.log(dataURL); function base64ToBlob(img) { let parts = img.split(";base64,"); let contentType = parts[0].split(":")[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); } const blob = base64ToBlob(dataURL); let evt = document.createEvent("HTMLEvents"); evt.initEvent("click", true, true); let aLink = document.createElement("a"); aLink.download = "邮件签名"; aLink.href = URL.createObjectURL(blob); aLink.click(); }); }); },

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。