html2canvas (踩坑) 网络图片显示不出来&生成图片只有一半或者空白&文字显示不出来问题处理

这里只提供解决思路,代码就不粘贴出来了

  1. 图片显示不出来
    就像大多数人说的一样,HTML中的图片产生了跨域,可以将网络图片转为base64后修改img 的src属性值,添加图片允许跨域的属性。调用html2canvas的API时,将跨域参数设置为true,允许跨域。
  2. 图片生成显示不全,只有半截或者空白
    在有滚动的页面,产生了滚动条后,生成的图片可能会只有一半或者空白。答案只有一个,那就是要把html2canvas的配置项参数中,scrollx,scrolly都设置为0,问题就解决了。
 html2canvas(dom, {
    backgroundColor: "#ffffff",
    allowTaint: true,  //开启跨域
    useCORS: true,
    height: height,
    width: width,
    scrollY: 0,
    scrollX: 0,
})
  1. 部分文字显示不出来
    在要生产图片的HTML中,比如海报图,有一大段说明文字,刚好你又用了CSS设置了显示多少行,然后打省略号这种类型的css样式,那么恭喜你,问题找到了,html2canvas不支持,把这些代码通通delete掉。如果你要实现这种效果,只能用其他的方法,比如js截取掉后拼接上…,要么就写高度然后超出隐藏。
  • 9
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值