解决vue使用html2canvas的截图不完全问题

最新推荐文章于 2024-04-12 17:53:05 发布
最新推荐文章于 2024-04-12 17:53:05 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： js bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51601829/article/details/119875199
版权

在一次小活动中偶然发现这个问题，（具体如图）
在这里插入图片描述
之前没有写头图只写的按钮的时候没有发现这个问题，经过查询原来 是滚轮滑动造成的，主要是html2canvas是根据body进行截图，若内容高度高于body时，就会出现这样的问题(大概意思就是有滚动条时造成的)
解决方案：(在生成截图前，先把滚动条置顶) 虽然这是一个不太好的方法，但是确实能解决

      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0;

记录一下，21-8-23
（有更好的解决欢迎留言）

夏奈写Bug
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 使用 html2canvas 截屏并下载图片至本地（重点兼容ie浏览器）
05-06
html2canvas的依赖包，复制放在node_modules中
html2canvas关于图片不能正常截取的解决方案
12-11
但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来。 官方文档 在项目里面操作了半天未果，google了半天未果。此时有些许绝望。突然想到了，为什么不去它的 官网...
html2canvas截图空白问题的解决
11-21
最近在项目中遇到一个需求，需要提供网页截图的功能。百度下发现html2canvas很好用。那就试试吧。 资源下载地址 插件下载地址：html2canvas下载地址 使用方式 项目使用的react组件开发方式。参照官方的说明文档getting-started.md,按照以下步骤进行： 1、使用以下命令安装 npm install html2canvas --save 2、在文件中引入html2canvas import html2canvas from 'html2canvas'; 3、文件中的使用 html2canvas(document.body).then(function(ca
html2canvas控件截图时，图片显示不全
elvia7的博客
03-15 2673
再回头查项目代码，发现canvas1和canvas2的外面，包了一层span，span的样式设置成了。但是截取后的图片，div里面的canvas显示不全，只能显示部分区域。查阅了html2canvas的git issus，找到类似的问题。使用html2canvas截取类似下方的图片。尝试过延时截图、跨域等方法，但是都没有解决。项目中需要将页面部分显示区域进行截图保存。div里面套了若干个canvas图片。去掉hidden，可以正常截图。
html2canvas 截图不全问题解决
最新发布
digger_419的博客
04-12 874
最初看到的解决方案如下，发现和项目中并不匹配，我的元素并未使用 prosition: fixed 去做样式处理。（ps: 我的需求迭代代码中有使用 sticky 进行导航栏样式定义）之前在开发 PC 端项目时，遇到了使用 html2canvas 生成「滚动页面」全屏截图时不全的问题，发现中间有一小部分在截图中丢失。通过查找相关资料，找到了合适的解决方案。通过设置 windowWidth 和 windowHeight 去设置生成渲染图片时的宽高；
html2canvas截图不全
域名转让：chinabeaut.com、unienv.com
06-15 740
html2canvas截图不全
用html2canvas遇到因为有滚动条截图不完整问题的解决方法
weixin_42333548的博客
05-27 9439
本文章向大家介绍在vue项目中用html2canvas遇到因为有滚动条截图不完整问题的解决方法(设置height和windowHeight)，需要的朋友可以参考一下。 1、安装 npm install html2canvas --save 2、使用 import html2canvas from 'html2canvas'; 基本逻辑 html2canvas(document.getElementById('demo'), { backgroundColor: '...
使用html2canvas插件截图不全的问题，亲测有效！！！
weixin_42178050的博客
07-14 1927
https://www.cnblogs.com/xingzoudecd/p/12603632.html 在处理之前，如果页面很长（伴有滚动条），只能截取到当前区域，那这样肯定是不可取的。所以就用了如下方法： window.pageYoffset = 0; document.documentElement.scrollTop = 0; document.body.scrollTop = 0; 要点是主要是html2canvas根据body进行截图，若内容高度高于body时，就会出现这样的问题，所以解决方案就是
用html2canvas截图保存图片趟坑记录
qq_37485170的博客
04-21 2480
​前言：开发过程中截图保存图片用到html2canvas，但是呢，使用过程中也会趟坑。。。来说下趟过的坑 一、截图不全问题：开发中发发现有滚动条的情况下会截图不全，仅能展示出当前页面展示出来的内容二、不支持textarea换行显示三、不支持省略号:js控制字数，截取字数长度后，动态添加省略号 ​
html2canvas截图图时图片不全
LILEILEILOVE的博客
04-25 2173
1.被截取的元素要有宽高，不能有overflow:hidden; 2.超出屏幕的部分截取异常，但是把屏幕滑到最顶端截取就正常了，加入以下代码 window.pageYOffset = 0; document.documentElement.scrollTop = 0; document.body.scrollTop = 0 ...
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案
11-20
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案，设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，将这个高度开始将往下的内容都放到下一页，设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，将这个高度开始将往下的内容都放到下一页
vue 使用html2canvas将DOM转化为图片的方法
10-18
主要介绍了vue 使用html2canvas将DOM转化为图片的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中使用canvas方法总结
01-19
下面就是小编带给大家的Vue中怎么使用canvas方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。 1、如果数组中都是canvas对象, vue如何能吧canvas对象渲染到页面。v-html只能渲染出一个字符串, 没办法像...
html2canvas.js生成页面图片显示不全，采坑记录
xiaojiajian520的专栏
01-22 1608
项目场景： 由于移动端项目需要用到html2canvas.js生成页面图片进行分享操作 问题描述： html2canvas.js生成页面图片显示不全，采坑记录 原因分析： 调试发现css代码中一旦使用display: -webkit-box,截图就是空白，如下图： 分析源码发现并没有对-webkit-box进行解析： 解决方案： 我这里改用flex布局进行替换 ...
html2canvas截图图片只有一半的问题
m0_60189398的博客
12-19 703
项目有个海报分享的功能，实现方案是跳H5然后用html2canvas生成图片，但是生成的图片里面的图片都只有一半，找了很多方案都没用。最后发现是css用了transform:translateX(-50%)；另外 <view data-html2canvas-ignore="true"> 给元素设置上这个属性可以隐藏这个元素，不会被绘制到图片里。太坑了，这个问题我研究了2天，图片一直出来一半，以为是跨域问题，后来在网上搜到一篇文章看到了解决方案 ，不得不说，太赞了，解决我的大问题。
html2canvas 截图table不全的问题
吃糖牙疼的博客
03-23 2049
html2canvas 截图table的问题
vue中使用html2canvas截图时间过长如何用代码解决
07-11
如果在Vue中使用html2canvas进行截图时遇到时间过长的问题，可以尝试以下方法来解决： 1. 添加延时：在循环截图的过程中，可以在每次截图之间添加一定的延时，以降低截图的频率，从而减少总体的截图时间。可以使用setTimeout方法来实现延时。 ```javascript async function captureScreenshots() { const container = document.getElementById('screenshot-container'); // 替换为你需要截图的容器元素ID const screenshots = []; for (let i = 0; i < 10; i++) { // 循环次数，根据实际需求修改 await new Promise((resolve) => { setTimeout(resolve, 1000); // 每次截图之间的延时时间，根据实际需求修改 }); const canvas = await html2canvas(container); screenshots.push(canvas.toDataURL('image/png')); // 在这里可以将截图结果进行处理，比如保存到本地或者发送到服务器 // ... console.log(`截图${i + 1}完成`); } console.log('所有截图完成'); } // 调用函数开始循环截图 captureScreenshots(); ``` 在上述代码中，通过使用setTimeout方法，在每次截图之间等待1秒钟的延时。 2. 分批截图：如果循环截图的次数过多，可以考虑将截图任务分批进行，以避免一次性截图过多导致的时间过长问题。可以根据实际需求，将截图任务分成多个小批次进行循环截图。 ```javascript async function captureScreenshots() { const container = document.getElementById('screenshot-container'); // 替换为你需要截图的容器元素ID const screenshots = []; const batchSize = 5; // 每批次截图的数量，根据实际需求修改 for (let i = 0; i < 10; i += batchSize) { // 循环次数和每批次数量，根据实际需求修改 await new Promise((resolve) => { setTimeout(resolve, 1000); // 每批次截图之间的延时时间，根据实际需求修改 }); const batchScreenshots = await Promise.all( Array.from({ length: batchSize }, (_, index) => html2canvas(container) ) ); screenshots.push(...batchScreenshots.map((canvas) => canvas.toDataURL('image/png'))); // 在这里可以将每批次的截图结果进行处理，比如保存到本地或者发送到服务器 // ... console.log(`第${i + 1}批次截图完成`); } console.log('所有截图完成'); } // 调用函数开始循环截图 captureScreenshots(); ``` 在上述代码中，通过设置`batchSize`参数来指定每批次截图的数量，然后使用Promise.all方法将每批次的截图任务同时进行，以提高截图效率。 希望以上方法能够帮助您解决Vue中使用html2canvas截图时间过长的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值