html2canvas渲染时候,样式走样问题。(前端)

工作需求中要做一个将整个页面变成图片下载在本地的功能。

使用了html2canvas第三方JS插件。

在渲染的时候,因为原页面含有DIV和canvas连线,出来的图片,div正常,但是canvas连线相对DIV偏移向上了。

一开始以为是html2canvas在渲染原页面canvas的时候会出问题,找了很多文章看。

但是最终确定了,其实是因为原页面中的DIV 使用了position:absolute;top:200px。而canvas中使用了相对定位position:absolute;top:20%。

把top:20%改为top:230px之后,图片就正常了。

也就是说,使用html2canvas的时候,渲染的页面尽量不要使用相对定位,这样出来的图片容易变形。

 

 

上一篇:h5页面生成海报的插件---html2canvas 及生成的图片模糊问题


下一篇:生成带二维码图片并通过微信分享