Question

我正在使用 HTML2Canvas 来捕获我的html页面的屏幕截图并将其保存为服务器中的图像。我的Html包含 d3.js 图表和html元素。 d3.js图表生成为svg，因此为了捕获svg，我使用 Fabric.js 将svg转换为canvas元素。完成此过程后，我使用Html2Canvas将整个网页捕获为图像并将其保存在服务器中。

整个过程在Chrome和FF中运行良好。问题是使用IE时。在IE 11中，除了图表画布元素之外，页面中的所有其他内容都被捕获。

非常感谢您提供的任何帮助。

屏幕截图代码：

函数SaveHtmlAsImage（item，idx）

{

//创建一个新的画布元素

var canvasId = 'canvas' + idx;

//获取需要捕获的SVG。

var svg = d3.select(item).select("svg");

var d3canvas = document.createElement('canvas');

d3canvas.id = canvasId;

d3canvas.width = svg.attr('width');

d3canvas.height = svg.attr('height');

// add the canvas to html body

document.body.appendChild(d3canvas);

//使用Fabric.js

将svg转换为canvas

fabric.loadSVGFromString(svg.node().parentNode.innerHTML, function (objects, options)

{

  var canvasObj = new fabric.Canvas(canvasId);

    var obj = fabric.util.groupSVGElements(objects, options);

    canvasObj.add(obj).renderAll();

//用canvas元素替换svg。

    d3.select(item).select("svg").remove();


    $(item).find('#ChartItem').append(d3canvas);

//使用Html2Canvas捕获整个html，将其保存为图像。

html2canvas(item,{
        onrendered: function (canvas) {                
            var canvasdata = canvas.toDataURL("image/bmp");
            var image = canvasdata.replace(/^data:image\/png;base64,/, "");
            imageDataLst.push({ key: idx, imageData: image);                              
        }
    }, { width: 1250, height: 750 });

});

}

请提供解决此问题的建议。

Answer 1

我发现此问题的根本原因是另一个嵌入图表内的svg图标。用png图像替换svg图标修复了这个问题。

很抱歉给您带来不便。希望将来有人帮助。

HTML2Canvas不在IE11中捕获画布数据

1 个答案: