HTML2Canvas 未在 IE11 中捕获 canvas 数据

Question

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

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

我们将不胜感激。

截屏代码：

函数保存HtmlAsImage(item, idx)

{

//创建一个新的canvas元素

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 中捕获 canvas 数据

HTML2Canvas not capturing canvas data in IE11

internet-explorer

svg

canvas

html5-canvas

html2canvas