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

回答

相关问题