一、问题
h5项目中有给上传的图片加天气、地理位置等水印信息需求,本来想用cavas画,但是代码又长又臭,样式也不那么灵活。然后想到用html2canvas,我可真是个小机智。在页面内容不多的页面上没有问题,效果也不错,但是内容很多会滚动的页面就出现了截掉一半内容的情况。这是为什么呢?
二、解决
一番查找之后,在官网看到了scrollY属性,这个属性官网注解是渲染元素时要使用的y轴滚动位置(例如,如果元素使用位置:fixed),我要截图的元素正是fixed定位的,所以截图渲染的时候元素在画布上相对Y轴偏移了滚动条的高度。找到问题就好解决了,使用scrollY对这个偏移进行修正,用官网的例子代码示例:
html2canvas(document.querySelector("#capture"), { scrollY: 0 }).then(canvas => {
document.body.appendChild(canvas)
})
如果本文对你有些许帮助,动动手指点个赞吧,你的鼓励是我创作的动力,笔芯♥。