html2canvas无法渲染.svg格式的图像

Question

当我们使用html2canvas进行截屏时，具有.svg扩展名的图像无法正确呈现。我已经尝试了给出allowTaint:true选项，但仍然无法正常工作。

代码片段:

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

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

- Raghavenda Rai K

---

请您向社区共享您的代码以便获得帮助。 - Peter

<div class="myDiv" style="background-image:url('image.svg');"></div> html2canvas($(".myDiv"), { allowTaint: true, onrendered: function (canvas){ //使用画布 } }); - Raghavenda Rai K

Answer 1

如果我们使用带有src属性的img标签而不是div标签，html2canvas将捕获背景svg图像。所以我找到的解决方法是，在调用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 标签的情况。

- Raghavenda Rai K