html2canvas截图

 

html

<!--引入html2canvas.js-->
<script type="text/javascript" src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>


<div class="div1"></div>
<img src="" id="finalimg" />
<input type="button" value="确认" onclick="printPO();" />

js

function printPO(){
			console.log('截图');
			  //创建一个新的canvas
			  var canvas2 = document.createElement("canvas");
			  let _canvas = document.querySelector('.div1');
			  
			  var w = parseInt(window.getComputedStyle(_canvas).width);
			  var h = parseInt(window.getComputedStyle(_canvas).height);
			  //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
			  canvas2.width = w * 1.5;
			  canvas2.height = h * 1.5;
			  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(1.5, 1.5);

			  var rect = $('.div1').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
			  context.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
			 
			  //context.translate(0,0);
			  html2canvas(document.querySelector('.div1'), { canvas: canvas2, background :'#fff' }).then(function(canvas) {
				  //document.body.appendChild(canvas);
				  $('#finalimg').attr("src",canvas.toDataURL("image/jpeg") );
				  //$('#finalimg').show();
				  $('#finalimg').css("width","600px");
			  });
		}

问题：当有部分区域未显示，截出来的图该部分是黑的。