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,

canvas: cs,

width: width,

height: clientHeight

}).then((canvas) => {

const url = canvas.toDataURL()

// 微信浏览器下，可长按图片保存

if (browserType() === 1) {

this.imgUrl = url

} else {

this.imgUrl = URL.createObjectURL(that.base64ToBlob(canvas.toDataURL()))

}

})

}

}

// base64转blob

base64ToBlob (code) {

let parts = code.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})

}