html2canvas無法正常渲染特定的數據URI

渲染輸出這樣表示了。

html2canvas代碼：

html2canvas(document.getElementById('widgetElemet'), { 
    logging: true, 
    profile: true, 
    useCORS: true, 
    allowTaint: true, 
    onrendered: function(canvas) { 
     var dataURL = canvas.toDataURL(); 

     var param = { 
      to: emailToArray.validEmails, 
      cc: emailCCArray.validEmails, 
      bcc: emailBccArray.validEmails, 
      emailid: UserDetails.email, 
      subject: emailSubject, 
      message: emailMessage, 
      ImageDataURI: dataURL 
     } 

     this.postScreenShot(param)  
    }.bind(this)

}）該圖像

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojOTk5OTk5O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTIxLjksMjIuMmMwLDMuNS0yLjksNi40LTYuNCw2LjRzLTYuNC0yLjktNi40LTYuNHMyLjktNi40LDYuNC02LjRTMjEuOSwxOC43LDIxLjksMjIuMnogTTQuMiw1MWwyMi4xLTE5CgkgTTQ2LjUsNTEuMUwyNi40LDMyIE0zNy42LDQyLjZsMTEuNi0xMCBNNjIuNCw0NS4xTDQ5LjIsMzIuNyBNNjMsMUgxdjYyaDYyVjF6IE0xLDUxLjRoNjIiLz4KPC9zdmc+Cg==

來源

2017-07-19 Piyush Dhamecha

它看起來對我來說，無論html2canvas庫是幹什麼的，它不理解圖像的大小，是一個img標籤，或在一個div背景？與其他人有什麼不同？ – 2pha

那必須是破碎的圖像。嘗試在photoshop中打開相同的圖像，看看是否這是腐敗的。 –

@ 2pha它是所有圖像中具有src作爲數據url的img標記。 –

我只是檢查你的base64 SVG，看看它顯示了它顯示width和

數據URI height0所以這可能是問題。

替代解決方案同樣適用base64 SVG作爲background-image到div並且您的問題將得到解決。

window.takeScreenShot = function() { 
 
    html2canvas(document.getElementById("target"), { 
 
    onrendered: function(canvas) { 
 
     document.body.appendChild(canvas); 
 
    }, 
 
    width: 300, 
 
    height: 300 
 
    }); 
 
}

#target { 
 
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIwLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA2NCA2NCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjQgNjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojOTk5OTk5O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTIxLjksMjIuMmMwLDMuNS0yLjksNi40LTYuNCw2LjRzLTYuNC0yLjktNi40LTYuNHMyLjktNi40LDYuNC02LjRTMjEuOSwxOC43LDIxLjksMjIuMnogTTQuMiw1MWwyMi4xLTE5CgkgTTQ2LjUsNTEuMUwyNi40LDMyIE0zNy42LDQyLjZsMTEuNi0xMCBNNjIuNCw0NS4xTDQ5LjIsMzIuNyBNNjMsMUgxdjYyaDYyVjF6IE0xLDUxLjRoNjIiLz4KPC9zdmc+Cg=='); 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
button { 
 
    display: block; 
 
    height: 20px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 

 
<div id="target"> 
 
</div> 
 

 
<button onclick="takeScreenShot()">to image</button>

來源

2017-07-20 05:46:35

感謝這篇文章...我試過，但它顯示了灰色背景，而不是圖像... –

@PiyushDhamecha你可以把樣品小提琴？ –

這個問題和你提到的完全相同..我剛剛通過解碼svg添加了高度和寬度作爲父級高度和寬度，並且再次編碼爲base64 ..感謝兄弟.. –

html2canvas無法正常渲染特定的數據URI

回答

相關問題