HTML2Canvas not capturing canvas data in IE11

问题

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.

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.

Screen capture Code:

function SaveHtmlAsImage(item, idx)

{

//Create a new canvas element

var canvasId = 'canvas' + idx;

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

//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();

//Replace the svg with canvas element.

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


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

//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.

回答1:

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.

来源：https://stackoverflow.com/questions/42665790/html2canvas-not-capturing-canvas-data-in-ie11

标签

internet-explorer

canvas

svg

html5-canvas

html2canvas