问题:当出现滚动条时截图会有空白
解决办法:获取需要截图的图片的绝对定位,截图时设置精确的x,y
html2canvas(that.$refs.imageDom, {
// that.$refs.imageDom为需要截图的img元素 getActuralPosition为获取绝对位置,之前的文章有写过
x: that.getActuralPosition(that.$refs.imageDom).left,
y: that.getActuralPosition(that.$refs.imageDom).top,
}).then(canvas => {
...
});
这样设置后又出现了其它的问题,上边的白框问题解决了,但是左边有一个小的白框,去掉滚动条发现这个白框就消失了,所以确定仍是滚动条的问题,通过观察发现,滚动条的宽度的一半正好是左边白框的宽度,所以将绝对位置left+滚动条宽度/2就可以解决了
html2canvas(that.$refs.imageDom, {
// that.$refs.imageDom为需要截图的img元素 getActuralPosition为获取绝对位置,之前的文章有写过
x: that.getActuralPosition(that.$refs.imageDom).left + parseInt(that.getScrollWidth()/2),
y: that.getActuralPosition(that.$refs.imageDom).top,
}).then(canvas => {
...
});
为什么是一半,其实我之前加的是整个的滚动条的宽度,但是发现还是有问题,我尝试着加一半的宽度解决了