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标签而不是div标签和url，那么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标签的情况。

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

1 个答案: