HTML2Canvas 未在 IE11 中捕获画布数据答案

【问题标题】：HTML2Canvas not capturing canvas data in IE11HTML2Canvas 未在 IE11 中捕获画布数据
【发布时间】：2017-07-28 16:38:57
【问题描述】：

我正在使用 HTML2Canvas 来捕获我的 html 页面的屏幕截图并将其保存为服务器中的图像。我的 Html 包含一个 d3.js 图表和 html 元素。 d3.js 图表生成为 svg，因此为了捕获 svg，我使用 Fabric.js 将 svg 转换为画布元素。此过程完成后，我使用 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 转换为画布

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

});

}

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

【问题讨论】：

IE drawImage 绘制 SVG 图像后立即污染了画布。 h2c 确实使用这种方法在画布上绘制 svg，也许还有 fabricjs。避免这种情况的唯一方法是使用 canvasAPI 绘图方法在画布上重绘 svg。一些库，比如 canvg 会为你做这件事。
@Kaiido ：感谢您的快速回复。我在去 Fabric.js 之前尝试了 canvg.js，但我的 svg 是一个复杂的 [雷达图/气泡图]。使用 canvg.js 时，svg 到画布的转换会引发错误。以下是我使用canvg时得到的错误。错误：对象不支持属性或方法“getContext”文件：canvg.js
这个错误意味着你没有提供一个canvas元素作为canvg(canvasElement, svgString)的参数
@Kaiido 感谢您指出错误的根本原因。现在错误消失了，canvg 将 svg 转换为画布，但存在一些问题。该图表在其 svg 元素内包含一些 svg 图像。这些 svg 图像未正确保留其尺寸，因此这些图像与整个图表重叠。 [注意：我已经为图表内的 svg 图标设置了高度和宽度，但在转换过程中，图标会失去它们的高度和宽度。]

标签： internet-explorer canvas svg html5-canvas html2canvas

【解决方案1】：

我发现此问题的根本原因是嵌入图表中的另一个 svg 图标。用 png 图片替换 svg 图标解决了这个问题。

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

【讨论】：