html2canvas页面会缩小一下,我在使用html2canvas的时候出现一个生成的图片偏移不完整的情况...

我在使用的时候遇到一个问题:在页面出现滚动条的时候,生成的图片会出现偏移不完整的情况,网上的方法大致都试过了,但是都没有作用,有哪位知道怎么解决吗?

bVcRNcnimport HTML2Canvas from 'html2canvas'

function getWinClientHeight() {

let clientHeight = 0

if (document.body.clientHeight && document.documentElement.clientHeight) {

clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight

} else {

clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight

}

return clientHeight

}

function getDocClientHeight() {

return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)

}

export default async function (el, beforeCallBack, afterCallBack) {

if (typeof el === 'undefined') {

console.error('必须传入一个元素')

return false

}

if (typeof beforeCallBack !== 'undefined') {

beforeCallBack()

}

const scale = 1.5

const scrollY = window.scrollY

const scrollX = getDocClientHeight() > getWinClientHeight() ? -8.3 : 0

const canvas = await HTML2Canvas(el, {

width: el.clientWidth,

height: el.clientHeight,

backgroundColor: null,

scale,

scrollX,

scrollY: -scrollY,

useCORS: true

})

if (typeof afterCallBack !== 'undefined') {

afterCallBack(canvas)

return false

}

const resolveUrl = canvas.toDataURL('image/png', 1.0)

return resolveUrl

}

原本没有设置scrollX和scrollY的时候,是向下偏移的,设置了之后就向上偏移了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值