html2canvas截图图片只有一半的问题

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

坑！坑！坑！坑！坑！坑！坑！坑！坑！坑！坑！坑！

太坑了，这个问题我研究了2天，图片一直出来一半，以为是跨域问题，后来在网上搜到一篇文章看到了解决方案 ，不得不说，太赞了，解决我的大问题

项目有个海报分享的功能，实现方案是跳H5然后用html2canvas生成图片，但是生成的图片里面的图片都只有一半，找了很多方案都没用。最后发现是css用了transform:translateX(-50%)；去掉就好了。

另外 <view data-html2canvas-ignore="true"> 给元素设置上这个属性可以隐藏这个元素，不会被绘制到图片里。
 

马玉磊 前端工程师
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用html2canvas截图不全问题解决方案——经测可用
张林强的博客
06-15 6万+
首先说明下我们的需求： 在预览详情页时，要将预览页通过点击事件保存为图片 遇到的问题： 在使用了html2canvas插件后，出现了只能截取可视区域的页面的状况 解决方案： 根据需求页面需在加载完成后直接生成幕布，后期通过点击事件直接下载即可 $(function(){ var targetDom = $("#printInfo"); var c
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截图保存图片趟坑记录
qq_37485170的博客
04-21 2480
​前言：开发过程中截图保存图片用到html2canvas，但是呢，使用过程中也会趟坑。。。来说下趟过的坑 一、截图不全问题：开发中发发现有滚动条的情况下会截图不全，仅能展示出当前页面展示出来的内容二、不支持textarea换行显示三、不支持省略号:js控制字数，截取字数长度后，动态添加省略号 ​
解决html2canvas导出的图片显示不全问题
qq_40087969的博客
12-28 1275
不算完美的方案，但算解决了问题。不足之处，页面布局有一瞬间的变动，可以加一个全局loading效果优化用户体验。
html2canvas生成图片大量留白并截取不全的问题
pkmowang的博客
10-15 6967
在用html2canvas生成图片时发现图片上半部分空白，下半部分为只截了一半的图 对比发现跟滚动条的位置有关，也就是说，让滚动条再最顶端就不会出现这样的问题了 出问题代码 var el = document.querySelector(".content"); html2canvas(el).then(canvas => { var contract_img = ca...
html2canvas截图空白问题的解决
11-21
最近在项目中遇到一个需求，需要提供网页截图的功能。百度下发现html2canvas很好用。那就试试吧。 资源下载地址 插件下载地址：html2canvas下载地址 使用方式 项目使用的react组件开发方式。参照官方的说明文档...
详解html2canvas截图不能截取圆角图片的解决方案
09-27
这样一来，当使用HTML2Canvas截图时，虽然原始图片的圆角无法正确显示，但遮罩图片的圆角会起到替代作用，从而模拟出原本的圆角效果。 以下是一个简单的HTML结构示例，展示了如何使用遮罩图片来解决圆角问题： ```...
html2canvas关于图片不能正常截取的解决方案
09-22
但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。但是有些图片无论如何都显示不出来，这篇文章主要介绍了html2canvas关于图片不能正常截取的解决方案，感兴趣的小伙伴们可以参考一下
html2canvas截图不全
域名转让：chinabeaut.com、unienv.com
06-15 740
html2canvas截图不全
html2canvas.js实现整个区域甚至整个页面的截取
06-29
html2canvas.js实现整个区域甚至整个页面的截取，再次声明这不是一个小小的头像图片的移动截取（小小的截取就不要下载喽），是整个页面的截取；网页端需要的不多，就是现在不太好找了，所里我整理了一下
html2canvas长截图不全，底部内容空白
csdn_huangjiama的博客
11-01 5496
html2canvas长截图不全，底部内容空白 前言 采用html2canvas做长截图，截图内容上面部分显示完好，底部大片内容空白，但是图片的高度是正确的。。。 正文 思路1：图片没有渲染就开始截图了，于是我加延时操作，问题依然存在。代码如下： setTimeout((cb) => { const domObj = this.$refs.cont; html2Canvas(domObj,).then((canvas) => {
html2canvas.js生成页面图片显示不全，采坑记录
xiaojiajian520的专栏
01-22 1608
项目场景： 由于移动端项目需要用到html2canvas.js生成页面图片进行分享操作 问题描述： html2canvas.js生成页面图片显示不全，采坑记录 原因分析： 调试发现css代码中一旦使用display: -webkit-box,截图就是空白，如下图： 分析源码发现并没有对-webkit-box进行解析： 解决方案： 我这里改用flex布局进行替换 ...
html2Canvas常见问题以及解决
沉淀，积累、进步
12-24 7828
html2Canvas常见问题以及解决:图片模糊，白边，跨域等等问题
H5分享截图方案优化
闲鱼技术的博客
07-21 3289
背景分享是传播活动，吸引用户最重要的一环。现有分享手段多是题目配合单张图片，利用点击的方式跳转到目标页面。在信息越来越丰富的今天，单个题目和图片对用户的吸引力是有限的。而在对推广要求更高...
Html2Canvas 常见问题
Eighteen Z
07-28 5785
1. 文字样式丢失且都变成为最小号字体。 解决方案： 需要截图的节点根样式添加font-variant: normal； 2. 文字向下偏移。 解决方案： 指定html2canvas的版本号为1.0.0-alpha.12 3. 不完整，缺失，留白。 出现情况： 当截图区域超过视图高度，且滚动条未处在顶部时，会出现。 解决方案： 截图之前控制滚动条至顶部。 4. 模糊，不清晰。 出现情况： 通常是图片设置为背景的情况下，截图会比较模糊。 解决方案： 将背景图通过img标签加定位的方式实现。 ...
html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法
weixin_45721912的博客
08-31 2777
【代码】html2canvas 截图空白 或出现toDataURL' on 'HTMLCanvasElement或img标签没截下来 的所有解决办法。
react-js 创建pdf 下载并打印
wangshang1320的博客
05-12 2531
1.下载 npm install jspdf --save npm install html2canvas --save 2.使用 index.js import JsPDF from 'jspdf'; import React, {createRef} from 'react'; import JsPDF from 'jspdf'; import html2Canvas from 'html2canvas'; import dayjs from 'dayjs'; import {Butt
html2canvas生成图片为txt
07-28
很抱歉，但是html2canvas库并不支持将HTML生成为txt格式的图片。html2canvas库主要用于将HTML元素转换为canvas，并可以导出为图片格式（如PNG、JPEG等）。如果您需要将HTML生成为txt格式的图片，您可能需要使用其他的库或工具来实现。 #### 引用[.reference_title] - *1* [使用 html2canvas 生成图片](https://blog.csdn.net/qq_44973159/article/details/124213924)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [html2canvas生成图片问题汇总](https://blog.csdn.net/amswait/article/details/108775977)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值