html2canvas页面滚动时截图不全空白问题

一、问题

h5项目中有给上传的图片加天气、地理位置等水印信息需求，本来想用cavas画，但是代码又长又臭，样式也不那么灵活。然后想到用html2canvas，我可真是个小机智。在页面内容不多的页面上没有问题，效果也不错，但是内容很多会滚动的页面就出现了截掉一半内容的情况。这是为什么呢？

二、解决

一番查找之后，在官网看到了scrollY属性，这个属性官网注解是渲染元素时要使用的y轴滚动位置（例如，如果元素使用位置：fixed），我要截图的元素正是fixed定位的，所以截图渲染的时候元素在画布上相对Y轴偏移了滚动条的高度。找到问题就好解决了，使用scrollY对这个偏移进行修正，用官网的例子代码示例：

html2canvas(document.querySelector("#capture"), { scrollY: 0 }).then(canvas => {
    document.body.appendChild(canvas)
})

如果本文对你有些许帮助，动动手指点个赞吧，你的鼓励是我创作的动力，笔芯♥。