html2canvas .svg格式的圖片不會呈現

當我們使用html2canvas截圖時，擴展名爲.svg的圖片將無法正確呈現。我曾嘗試給allowTaint：true選項，但它仍然不起作用。html2canvas .svg格式的圖片不會呈現

代碼片段：

<div class="myDiv" style="background-image:url('image.svg');"> 
</div> 

html2canvas($(".myDiv"), { 
allowTaint: true, 
onrendered: function (canvas){ 
    //use canvas 
    } 
});

來源

2017-08-31 Raghavenda Rai K

能否請您分享您的社區代碼以獲取幫助。 –

html2canvas（$（「myDiv」），{ allowTaint：真實， onrendered：功能（畫布）{// 使用帆布 } }）; –

html2canvas將捕獲的背景SVG圖像如果我們使用img標籤，而不是在SCR屬性URL div標籤。所以我找到的解決方案是，在調用html2canvas函數之前，爲每個div動態創建新的img標記。

$(".myDiv").each(function() { 
     var url = $(this).css("background-image") 
     var src = url.substring(5, url.length - 2); 
     var image = new Image(); 
     image.src = src; 
     var canvas = document.createElement("canvas"); 
     var ctx = canvas.getContext("2d"); 
     ctx.canvas.width = $(this).height(); 
     ctx.canvas.height = $(this).width(); 
     ctx.drawImage(image, 0, 0); 
     $(this).append(canvas); 
    });

這隻適用於您可以用div標籤替換img標籤的情況。

來源

2017-09-04 09:07:32

html2canvas .svg格式的圖片不會呈現

回答

相關問題