html2canvas生成长图片时导致背景图渲染不全问题

已于 2022-11-06 10:25:20 修改
阅读量1.6k 收藏 6
点赞数 1
分类专栏： 插件 文章标签： 前端 html5
于 2022-11-05 17:18:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/louxinuo/article/details/127705899
版权

文章目录

1.问题

在移动端中使用html2canvas生成图片时，因为数据较多，导致生成的图片很长，图片后边一小段中设置的html背景图直接没有显示出来。
在这里插入图片描述

2.解决

将 html2canvas 配置参数 scale = 2 改为 scale = 1。

3.问题猜测

具体原因没有去深究，猜想是因为使用 scale = 2 时生成的长图片的像素值超过了浏览器canvas大小限制，改为 scale = 1 降低了清晰度，但是像素值变小了，所以解决了这个问题。

具体可以看一下html2canvas文档里的这一段问题记录
在这里插入图片描述

楼兮诺
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
canvas-使用图片背景
weixin_54057363的博客
03-09 1935
canvas-使用createPattern()方法,填充图片背景
js移动端页面生成图片demo(基于html2Canvas.js).zip
01-23
我们可以利用html2Canvas将整个可视区域或者特定的DOM元素渲染到canvas上，然后使用canvas的`toDataURL()`方法生成一个数据URL，该URL可以作为`<img>`标签的`src`属性，或者通过`download`属性让用户下载图片。...
解决html2canvas导出的图片显示不全问题
qq_40087969的博客
12-28 1462
不算完美的方案，但算解决了问题。不足之处，页面布局有一瞬间的变动，可以加一个全局loading效果优化用户体验。
html2canvas 截图不全问题解决
digger_419的博客
04-12 1237
最初看到的解决方案如下，发现和项目中并不匹配，我的元素并未使用 prosition: fixed 去做样式处理。（ps: 我的需求迭代代码中有使用 sticky 进行导航栏样式定义）之前在开发 PC 端项目时，遇到了使用 html2canvas 生成「滚动页面」全屏截图时不全的问题，发现中间有一小部分在截图中丢失。通过查找相关资料，找到了合适的解决方案。通过设置 windowWidth 和 windowHeight 去设置生成渲染图片时的宽高；
记录：使用html2canvas渲染标签元素实现屏幕截图、下载图片
最新发布
weixin_53715817的博客
06-05 244
html中Html2canvas+jszip的使用
html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法
weixin_45721912的博客
08-31 3029
【代码】html2canvas 截图空白 或出现toDataURL' on 'HTMLCanvasElement或img标签没截下来 的所有解决办法。
html2canvas生成图片问题汇总
凌晨不睡觉
04-12 1663
绘制图片最好是在页面加载完毕之后进行，处理好图片跨域问题参考： [使用canvas生成图片跨域问题的解决方案](http://t.csdn.cn/rBWAq)
使用html2canvas将HTML转图片
yanby921005的博客
03-31 583
我们经常会遇上动态生成海报的需求，而在Web前端中，生成图片非Canvas莫属。但是在实际工作当中，为了追求效率，我们会不可避免地去使用一些JS插件，而html2canvas.js就是一款优秀的插件，它可以轻松地帮你将HTML代码转换成Canvas，进而生成可保存分享的图片。 具体如何使用这款插件呢？接下来请让我用一个简单的示例来为大家讲解。 现在假设要生成如下图片，而所有图片和文字都是动态获...
html2canvas长截图不全，底部内容空白
csdn_huangjiama的博客
11-01 5630
html2canvas长截图不全，底部内容空白 前言 采用html2canvas做长截图，截图内容上面部分显示完好，底部大片内容空白，但是图片的高度是正确的。。。 正文 思路1：图片没有渲染就开始截图了，于是我加延时操作，问题依然存在。代码如下： setTimeout((cb) => { const domObj = this.$refs.cont; html2Canvas(domObj,).then((canvas) => {
html2canvas生成的图片偏移不完整的解决方法
11-20
总的来说，解决html2canvas生成图片偏移不完整的问题主要涉及到理解和调整渲染选项，特别是`scrollY`和`scrollX`参数，以及注意CSS变换对渲染的影响。正确配置这些参数，并避免使用可能导致偏移的CSS属性，可以确保...
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
11-26
《使用html2canvas将HTML内容转化为Canvas生成图片》 在现代网页开发中，有时我们需要将网页的部分或全部内容转化为图片，以便于分享、保存或打印。html2canvas是一款强大的JavaScript库，它允许开发者在浏览器端...
html2Canvas演示
12-14
html2Canvas可以截取网页中的整体或者某部分，然后输出为图片
html2canvas 将html代码转为图片的使用方法
09-28
- **布局与样式**：HTML2canvas依赖于元素的实际布局和样式来生成图像，所以确保元素的样式正确并且能被正确渲染至关重要。对于完整截图，可能需要将元素从文档流中隔离，比如设置`position: absolute`。 - **...
利用html2canvas和canvas2image可将页面生成一张图片
02-15
`html2canvas` 支持大部分CSS3属性，如边框、背景色、渐变等，使得生成的图片尽可能接近页面的实际显示效果。 使用`html2canvas`时，你需要引入库文件，然后调用其提供的API，传入需要转换的DOM元素。例如： ```...
使用 html2canvas 和 jspdf 将页面转 pdf，同时解决当页面过长时，页面白屏问题
SiShen654的博客
10-07 2477
别人使用标签的方式来显示 base64，但是当页面过长时，base64 大小过大会导致页面解析异常，显示白屏。代码如下，直接粘贴复制即可，代码中 jspdf 是全局引入，你可以自己局部引入。
解决 html2canvas 转图片时不显示网络图片的问题
qq_19306197的博客
05-11 1889
问题：正常转换成图片的话，网络图片显示不出来，其余元素都能按样式正常显示，后来经测试如果加载本地图片，也能正常显示，于是就想办法将网络图片变成本地图片（base64二进制）。业务场景：需要将div元素转成一张图片，div元素里面包含img标签，加载一张网络图片。解决方案：网络图片变成本地图片（base64二进制）贴出核心代码，自己研究吧。
html2Canvas常见问题以及解决
沉淀，积累、进步
12-24 7926
html2Canvas常见问题以及解决:图片模糊，白边，跨域等等问题
html只加载当前屏幕内容,HTML2Canvas不显示完整div，只显示屏幕上可见的内容？
weixin_30166691的博客
06-08 714
var htmlSource = $('#potenzial-page')[0];$('#btn').on("click", function() {html2canvas(htmlSource).then(function(canvas) {var img = canvas.toDataURL();window.open(img);});});我使用V5测试3.运行此代码时，它只呈现的是在屏幕上...
小程序canvas重复调用，二次渲染失败问题
qq_58101212的博客
06-30 1173
原因：canvas二次调用后canvas-id重复了，重复的id对应的画布就不正常工作了。问题：第一次点击canvas正常显示，后续再点击就不显示了，渲染失败。解决方法：给重复调用的canvas-id不同的值进行调用。
html2canvas uniapp 生成图片
09-01
html2canvas是一个JavaScript库，它可以在浏览器端或app端直接对整个或部分页面进行截屏，并将页面渲染成一个canvas图片。通过读取DOM并将不同的样式应用到这些元素上实现截图功能。 在uniapp中使用html2canvas生成图片的步骤如下： 1. 监听截图按钮的点击事件。 2. 调用html2canvas函数，并传入要截图的元素作为参数，可以使用document.getElementById()来获取元素。 3. 在html2canvas的配置对象中，可以设置一些属性，比如背景颜色、是否支持图片跨域、放大倍数、截图的高度和宽度等。 4. 使用then()方法来处理生成的canvas对象。 5. 使用canvas对象的toDataURL()方法将canvas转换为base64格式的图片数据。 6. 使用生成的图片数据，可以进行一些操作，比如保存到本地或者跳转到其他页面进行展示。 通过以上步骤，你可以使用html2canvas在uniapp中生成图片[1]。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [小程序 uniapp中webview内嵌H5页面 html2canvas截图 base64的图片保存到手机相册](https://blog.csdn.net/M__O__M/article/details/126985611)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [html2canvas将HTML内容写入Canvas生成图片 uniapp](https://download.csdn.net/download/weixin_42085648/13704954)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值