工作需求中要做一个将整个页面变成图片下载在本地的功能。使用了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渲染时候,样式走样问题。(前端)


基础教程推荐
猜你喜欢
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件 2023-10-29
- html5视频如何嵌入到网页(视频代码) 2025-01-22
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 2024-01-08
- 纯css实现漂亮又健壮的tooltip的方法 2024-01-23
- Loaders.css免费开源加载动画框架介绍 2025-01-23
- 创建Vue3.0需要安装哪些脚手架 2025-01-16
- js判断一个对象是否在一个对象数组中(场景分析) 2022-10-21
- Django操作cookie的实现 2024-04-15
- JSONObject与JSONArray使用方法解析 2024-02-07
- Bootstrap学习笔记之css组件(3) 2024-01-22