解决html2canvas同时生成多张图片出问题

最新推荐文章于 2024-08-12 11:14:36 发布

三妹_day

最新推荐文章于 2024-08-12 11:14:36 发布

阅读量6.3k

点赞数 4

分类专栏： js问题文章标签：解决问题

本文链接：https://blog.csdn.net/qq_26841153/article/details/88368831

版权

在尝试使用html2canvas生成全屏页面的多张图片时遇到问题，只能生成一张。解决方案包括确保要截图的内容在可视区域内，复制元素使其全部可见，然后循环调用截图方法。通过这些步骤，成功实现了全屏页面的多张图片生成。

摘要由CSDN通过智能技术生成

在做页面生成多张图片的时候出现了问题，页面是全屏的，但是只能生成一张。
之后找到了解决方法。
1.要显示的页面得在可视区域，也就是屏幕内。

 <div class="swiper-container">
		    <div class="swiper-wrapper">
		      <div class="swiper-slide">
		      	<div class="invite" style="background:url(images/share_bg.png)  no-repeat;background-size: 100% 100%;">
					<p class="p">
						<img src="images/touxiang.png" class="touxiang"/>
					</p>
					<p class="user">我是湛山</p>
					<p class="qrcode"></p>
				</div>
		      </div>
		       <div class="swiper-slide">
		      	<div class="invite" style="background:url(images/index_bg.jpg)  no-repeat;background-size: 100% 100%;">
					<p class="p">
						<img src="images/touxiang.png" class="touxiang"/>
					</p>
					<p class="user">我是湛山</p>
					<p class="qrcode"></p>
				</div>
		      </div>
		      <div class="swiper-slide">
		      	<div class="invite" style="background:url(images/user_bg.jpg)  no-repeat;background-size: 100% 100%;">
					<p class="p">
						<img src="images/touxiang.png" class="touxiang"/>
					</p>
					<p class="user">我是湛山</p>
					<p class="qrcode"></p>
				</div>
		      </div>
		    </div>
			<!--<div class="swiper-pagination"></div>-->
		  </div>

2.可以先复制元素，全部为可视状态，在进行截图（生成图片）就行

<!--创建出一个一样的element ，全部为可视状态，在进行截图  就行了-->
		<div class="copyDom copyDom0">
		</div>
		<div class="copyDom copyDom1">
		</div>
		<div class="copyDom copyDom2">
		</div>
<script>
//复制邀请的部分,让它在可视去,能生成图片
 for(var i=0;i<$('.invite').length;i++){
	    	$(".copyDom"+i).append($(".invite").eq(i).eq(0).clone());
	    	
	    }
		// 复制好之后,移除元素
		 $(".swiper-container").eq(0).remove();  
		</script>

3.写个方法，循环调用

 //调用方法,截图
    for(var i=0;i<$('.copyDom').length;i++){
    	creatImg($('.copyDom').eq(i),i);
    	console.log()
    }

//截图（生成图片）方法
function creatImg(obj,i){
    	console.log(i)
    	 canvas=false
    	//创建一个新的canvas
	    var canvas2 = document.createElem