html2canvas截图部分背景无底色

首先 npm i html2canvas -D

//根据url进行文件下载

downloadByURL = (url, { filename }) => {

    const link = document.createElement('a')

    const evt = document.createEvent('HTMLEvents')

    evt.initEvent('click', false, false)

    link.href = `${url}`

    link.target = '_blank'

    link.download = filename

    link.style.display = 'none'

    document.body.appendChild(link)

    link.click()

    // 释放URL 对象

    window.URL.revokeObjectURL(link.href)

}

//canvas截图核心

html2canvas(document.querySelector('#test')).then(canvas => { //这里写自己需要截图的id

                const img = canvas.toDataURL()

                const fileName = test+'.png'

                //处理ie兼容问题

                if (window.navigator && window.navigator.msSaveOrOpenBlob) {

                    var blob = canvas.msToBlob()

                    window.navigator.msSaveOrOpenBlob(blob, fileName)

                }else{

                    downloadByURL(img, { filename: `test || '截图'}.png` })

                }

            })

效果如下 ：

我们会发现 右边背景为灰色 我试过很多方法 比如强制给canvas加背景色 

 => backgroundColor:'#ffffff' 但是 并没有效果 

分析一下原因 ： 这种bug是为什么出现呢？

主要是 你截图是整个页面  就是你当前屏幕 当你的内容大于你的屏幕时 就会出现这种情况

那要怎么解决呢？

我们只需要实时获取当前元素的宽高 让其伸展 将canvas位移到中心即可

html2canvas(document.querySelector('#test'),{

                //获取元素宽高 让其以一个规律或者固定宽高伸展

                width: document.querySelector('#test').clientWidth + 500,

                height: document.querySelector('#test').clientHeight + 300,

                //将截图部分 移入中心位置

                scrollX: 250,

                scrollY: 150,

                //加上白色背景

                backgroundColor: 'white'

            }).then(canvas => {

                const img = canvas.toDataURL()

                const fileName = test+'.png'

                //处理ie兼容

                if (window.navigator && window.navigator.msSaveOrOpenBlob) {

                    var blob = canvas.msToBlob()

                    window.navigator.msSaveOrOpenBlob(blob, fileName)

                }else{

                    downloadByURL(img, { filename: `test || '截图'}.png` })

                }

            })

效果：