HTML2Canvas不在IE11中捕获画布数据 [英] HTML2Canvas not capturing canvas data in IE11

问题描述

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

I am using HTML2Canvas to capture screenshot of my html page and save it as image in server. My Html contains a d3.js chart and html elements. d3.js chart is generated as svg, so to capture svg, I use Fabric.js to convert svg to canvas element. After this process is complete I use Html2Canvas to capture the entire web page as image and save it in server.

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

The whole process is working fine in Chrome and FF. Problem is when using IE. In IE 11, everything else in the page is captured except the chart canvas element.

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

Any help provided will be much appreciated.

屏幕截图代码：

函数SaveHtmlAsImage（item，idx）

function SaveHtmlAsImage(item, idx)

{

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

//Create a new canvas element

var canvasId = 'canvas' + idx;

//获取需要捕获的SVG。

// Get the SVG which needs to be captured.

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转换为画布

//Convert the svg to canvas using Fabric.js

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。

//Replace the svg with canvas element.

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


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

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

//Use Html2Canvas to capture the whole html to save it as image.

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

});

}

请提供您的建议修复此问题。

Please provide your suggestions to fix this issue.

推荐答案

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

I found the root cause for this issue to be another svg icon which was embedded inside the chart. Replacing the svg icon with png image fixed this issue.

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

Sorry for the inconvenience. Hope it helps someone in future.

这篇关于HTML2Canvas不在IE11中捕获画布数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！