javascript - 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 
    } 
});

Answer 1

如果我们在 scr 属性中使用 img 标签而不是带有 url 的 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);
    });

这仅适用于可以用 img 标签替换 div 标签的情况。