工作需求中要做一个将整个页面变成图片下载在本地的功能。使用了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-31
- sql、linq、lambda三种表达方式转换 转自https://www.cnblogs.com/drzhong/p/4393231.html 2023-10-25
- 详解CSS伪元素的妙用单标签之美 2022-11-23
- Windows上的HTML5地理定位比Linux更准确(Firefox,Chrome,[Chromium]) 2023-10-25
- CSS解决未知高度垂直居中的问题 2022-10-16
- echarts报错:Error in mounted hook的解决方法 2022-08-30
- 利用ajax+php实现商品价格计算 2023-02-23
- Vue实现动态显示表单项填写进度功能 2023-07-10
- 关于JavaScript对象类型之Array及Object 2023-07-09
- php – 将HTML选择/下拉列表提交到MySQL数据库 2023-10-25
