最近接到反馈，先前做的一个小工具会出现一些bug 主要原理是根据用户填写的内容生成一个隐藏起来的节点，并把这个节点截取生成图片下载下来；
首先把这个节点显示出来发现节点是正常的
那么问题就出现在获取节点上，这里使用到了html2canvas将节点转化为 base64 格式的图片，打印一下这个文件：
ok, 是空白的；
当页面缩小及生成图片滚动页面时，会出现类似问题，后来发现是页面有滚动条时会出现截图失败；
查阅文档还可以通过获取截图范围的精确位置截图；
我们需要的是截图区域左上角的 x, y 坐标，以及截图区域的宽高；
const dom = $(".creatSign-layout”);x 坐标：dom.offset().lefty 坐标：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();});});},
