html2canvas.js插件截圖空白問題和微信長按圖片分享失敗問題

發現使用

html2canvas.js插件截圖保存在前端很方便。學習過程中遇到的問題，主要負責將html標簽轉化為圖片。
canvas2image.js是一個展示圖片的canvas插件，解決微信分享失敗就靠這個插件。
截圖出現空白和截圖不全。
如果要截取圖片為圓角，且圓角為透明情況處理。（問題新增20200929）
問題原因：

html2canvas.js插件截圖是基於body標簽的，如果body存在滾動條就會出現截圖空白的情況。如何避免：
關鍵點：在截圖前將滾動條位置設置在頂部。截圖時，截圖選擇內容標簽不是body，就將截圖寬度和高度設置為選擇標簽的寬高在截圖。
處理圓角透明方案：將需要截取的div的背景的css樣式 background 設置為一個url圖片。在截圖時就不會出現圓角變為白色背景了。
具體代碼：

<script src="jquery-1.11.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>

<style>
/* 海報  解決圓角白色背景的關鍵css為：background: url(poster.jpg) no-repeat;  */

.poster{min-height: 100vh;height: 100vh;background: url(poster.jpg) no-repeat;background-size: 100% 100%;position: relative;  border-radius: 50px;}

.poster .qrcode{position: absolute;width: 2.5rem;height: 2.5rem;background: #5a13c9;border: 3px solid #00cd7f;border-radius: .2rem;text-align: center;bottom: 31%;left: 0;right: 0;margin: 0 auto;}
.poster .qrcode img{width: 2.36rem;height: 2.36rem;margin-top: 3px;}
</style>

<!-- 海報彈窗 -->
	<div class="dialog flex" id="alert10" style="display:none" >
		<div class="poster_con">   
   
			<div class="poster"  id="contbox">
				<div class="qrcode" id="qrcode">
				
				</div>
			</div> 
    
			<div class="poster_btn"><button id="down">點擊保存圖片分享給好友</button><a id="down1" class="down" href="" download="downImg"   style="display:none"></a></div> 
</div> </div>

　　

瀏覽器

下載圖片js代碼：

  $("#down").click(function(){
        // 截圖前先講滾動條置頂
        $('html,body').animate({'scrollTop':0});
        // document.getElementById("contbox") 需要截圖的是div標簽
        html2canvas(document.getElementById("contbox"),
            {logging:false,
                width:$("#contbox").width(),// 寬設置為div標簽的寬
                height:$("#contbox").height(),// 高設置為div標簽的高
                useCORS:true}).then(function(canvas) {
            //將canvas畫布放大若干倍，然后盛放在較小的容器內，就顯得不模糊了
            var timestamp = Date.parse(new Date());
            //把截取到的圖片替換到a標簽的路徑下載
            $("#down1").attr('href',canvas.toDataURL("image/png"));
            console.log(canvas.toDataURL("image/png"));
            //下載下來的圖片名字
            $("#down1").attr('download',timestamp + '.png') ;
            $("#down1")[0].click();
            //document.body.appendChild(canvas);
        });

    });

 

微信分享長按圖片分享js代碼：

	$("#down").click(function(){
        // 截圖前先講滾動條置頂
        $('html,body').animate({'scrollTop':0});
		$('body').css({'overflow':'hidden'})
        // document.getElementById("contbox") 需要截圖的是div標簽
        html2canvas(document.getElementById("contbox"),
            {logging:false,
                width:$("#contbox").width(),// 寬設置為div標簽的寬
                height:$("#contbox").height(),// 高設置為div標簽的高
                useCORS:true}).then(function(canvas) {
				// 將canvas轉為圖片
                        var img = Canvas2Image.convertToImage(canvas,$("#contbox").width()*2,
                            $("#contbox").height()*2);
                        // 圖片添加到頁面中，在微信里長按添加的img圖片就可以正常使用微信自帶的長按圖片分享功能
                        $('body').append(img);
                        $('body').css({'overflow':'scroll'})
           
        });

    });