工作需求中要做一个将整个页面变成图片下载在本地的功能。使用了html2canvas第三方JS插件。在渲染的时候,因为原页面含有DIV和canvas连线,出来的图片,div正常,但是canvas连线相对DIV偏移向上了。一开始以为是h...
工作需求中要做一个将整个页面变成图片下载在本地的功能。
使用了html2canvas第三方JS插件。
在渲染的时候,因为原页面含有DIV和canvas连线,出来的图片,div正常,但是canvas连线相对DIV偏移向上了。
一开始以为是html2canvas在渲染原页面canvas的时候会出问题,找了很多文章看。
但是最终确定了,其实是因为原页面中的DIV 使用了position:absolute;top:200px。而canvas中使用了相对定位position:absolute;top:20%。
把top:20%改为top:230px之后,图片就正常了。
也就是说,使用html2canvas的时候,渲染的页面尽量不要使用相对定位,这样出来的图片容易变形。
沃梦达教程
本文标题为:html2canvas渲染时候,样式走样问题。(前端)
基础教程推荐
猜你喜欢
- 原生JS实现非常好看的计数器 2023-08-08
- TWebBrowser 与 MSHTML(4): location、history、screen、navigator 对象的属性与方法纵览 2023-10-27
- JS中ESModule和commonjs介绍及使用区别 2022-08-30
- Layui在table中使用select下拉框 2022-10-20
- Vue修饰符 2023-10-08
- vue中哪些数组方法不是响应式的 2023-10-08
- Ajax请求超时与网络异常处理图文详解 2023-02-23
- 在DIV+CSS排版中新闻列表的制作方法 2022-10-16
- 简单实现ajax三级联动效果 2023-02-14
- vue项目打包部署跨域的实现步骤 2023-07-10