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

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

 

		    

		      

		      	

					

						
					
					
我是湛山
					

				
		      
		       

		      	

					

						
					
					
我是湛山
					

				
		      
		      

		      	

					

						
					
					
我是湛山
					

				
		      
		    
			
		  

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

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.createElement("canvas");
	   
	    let _canvas=obj[0];
	//  _canvas = document.querySelector('.invite');
	    var w = parseInt(window.getComputedStyle(_canvas).width);
	    var h = parseInt(window.getComputedStyle(_canvas).height);
	    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
	    canvas2.width = w * 2;
	    canvas2.height = h * 2;
	    canvas2.style.width = w + "px";
	    canvas2.style.height = h + "px";
	    //可以按照自己的需求，对context的参数修改,translate指的是偏移量
	    //  var context = canvas.getContext("2d");
	    //  context.translate(0,0);
	    var context = canvas2.getContext("2d");
	    context.scale(2, 2);
	    html2canvas(obj[0], { canvas: canvas2 }).then(function(canvas) {
	        //document.body.appendChild(canvas);
	        //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
	        //document.querySelector(".down").setAttribute('href', canvas.toDataURL());
	        $(".img"+i).attr('src', canvas.toDataURL());
	     //    console.log(canvas)
	     //   obj.remove();
	      
			var imgCxt = canvas.toDataURL();
			
			
	    });
    }

.最后附上完整的代码

	
		
		
		
		
		
		
		
		
		
		
		
		
		
	
	
		返回
		
		 

		    

		      

		      	

					

						
					
					
我是湛山
					

				
		      
		       

		      	

					

						
					
					
我是湛山
					

				
		      
		      

		      	

					

						
					
					
我是湛山