html 显示 无效 图片,使用html2canvas截取屏幕图片时图片显示不全

对于超过屏幕高度的内容html2canvas无法截取，目前知道的比较好的有两个方法

1、通过复制DOM节点，插入到body下可解决，不过会出现当多个图片层叠的时候元素会出现混乱闪过的情况，不是很好用

2、通过canvas画布解决(推荐)

// 此方法可在图片load完成之后调用

drawToPic () {

// box -- 需要截取的屏幕的可视区域

const clientHeight = this.$refs.box.clientHeight

const width = this.$refs.box.clientWidth

const cs = document.createElement('canvas')

cs.width = width * scale

cs.height = clientHeight * scale

const content = cs.getContext('2d')

content.scale(scale, scale)

const rect = this.$refs.box.getBoundingClientRect()

content.translate(-rect.left, -rect.top)

const that = this

this.$nextTick(() => {

html2canvas(this.$refs.box, {

allowTaint: true,

taintTest: true,

useCORS: true,

scale: scale / 2,