工作需求中要做一个将整个页面变成图片下载在本地的功能。使用了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渲染时候,样式走样问题。(前端)
猜你喜欢
- ajax提交手机号去数据库验证并返回状态值 2023-01-26
- Vue之基本语法 2023-10-08
- 如何弹出QQ临时对话框实现不添加好友在线交谈效 2022-09-20
- 微信小程序全局配置之tabBar实战案例 2022-10-21
- 非常简单的Ajax请求实例附源码 2022-10-17
- React基础-JSX的本质-虚拟DOM的创建过程实例分析 2023-07-09
- Ajax 入门之 GET 与 POST 的不同处详解 2023-01-31
- JavaScript实现表格表单的随机选择和简单的随机点名 2022-10-22
- Ajax对xml信息的接收和处理操作实例分析 2023-02-23
- 在vue项目中封装filter过滤组件 2023-10-08