700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html2canvas (踩坑) 网络图片显示不出来生成图片只有一半或者空白文字显示不出来

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

时间:2018-11-21 10:52:35

相关推荐

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

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

图片显示不出来

就像大多数人说的一样,HTML中的图片产生了跨域,可以将网络图片转为base64后修改img 的src属性值,添加图片允许跨域的属性。调用html2canvas的API时,将跨域参数设置为true,允许跨域。图片生成显示不全,只有半截或者空白

在有滚动的页面,产生了滚动条后,生成的图片可能会只有一半或者空白。答案只有一个,那就是要把html2canvas的配置项参数中,scrollx,scrolly都设置为0,问题就解决了。

html2canvas(dom, {backgroundColor: "#ffffff",allowTaint: true, //开启跨域useCORS: true,height: height,width: width,scrollY: 0,scrollX: 0,})

部分文字显示不出来

在要生产图片的HTML中,比如海报图,有一大段说明文字,刚好你又用了CSS设置了显示多少行,然后打省略号这种类型的css样式,那么恭喜你,问题找到了,html2canvas不支持,把这些代码通通delete掉。如果你要实现这种效果,只能用其他的方法,比如js截取掉后拼接上…,要么就写高度然后超出隐藏。

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。