html2canvas长截图不全,底部内容空白

博客围绕html2canvas做长截图时底部大片内容空白的问题展开。先尝试加延时操作未解决,后发现是内容过多截不下来,因使用chrome浏览器,通过牺牲清晰度、调整分辨率,适当调小默认缩放比率解决了问题。

前言

采用html2canvas做长截图,截图内容上面部分显示完好,底部大片内容空白,但是图片的高度是正确的。。。

正文

思路1:图片没有渲染就开始截图了,于是我加延时操作,问题依然存在。代码如下:

setTimeout((cb) => {
  const domObj = this.$refs.cont;
  html2Canvas(domObj,).then((canvas) => {          
    var pageData = canvas.toDataURL("image/png");
  });
}, 13000);

思路2 :内容过多,截不下来。嘿一查还真是!我用的chrome浏览器

这不巧了吗,然而不可能删减内容啊,只能牺牲下清晰度,调整下分辨率 ,刚好人家提供了配置,html2canvas完整配置摸我:chrome浏览器默认缩放比率为2,那把它适当调小点,问题解决

devicePixelRatio的解释摸我

代码如下:

html2Canvas(domObj,{
  scale: 1
}).then((canvas) => {
  var pageData = canvas.toDataURL("image/png");
});

总结

关于html2canvas插件截图的问题种类很多,网上都有很多资料,具体还看自己的问题

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值