html2canvas生成图片空白或缺失问题解决

最近接到反馈，先前做的一个小工具会出现一些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();
});
});
},