html2canvas無法針對特定數據uri正確呈現

Question

我有這樣的div

渲染后的輸出顯示如下。

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)

}）

該圖像的數據uri

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

Answer 1

我剛剛檢查了您的base64 SVG ，看到它顯示width和height 0所以可能是問題所在。

替代解決方案是將相同的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,+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> 

Answer 2

我使用的是.png，但是html2canvas無法顯示.png文件。

所以我用svg而不是.png-將.png轉換成.svg。

它為我工作。