HTML2Canvas erfasst keine Canvas-Daten in IE11

Question

Ich verwende HTML2Canvas, um Screenshot meiner HTML-Seite zu erfassen und als Bild im Server zu speichern. Meine HTML enthält eine d3.js Diagramm und HTML-Elemente. d3.js Diagramm wird als Svg generiert, um Svg zu erfassen, verwende ich Fabric.js, um Svg in Canvas-Element zu konvertieren. Nachdem dieser Prozess abgeschlossen ist, verwende ich Html2Canvas, um die gesamte Webseite als Bild zu erfassen und auf dem Server zu speichern.

Der gesamte Prozess funktioniert gut in Chrome und FF. Problem ist bei der Verwendung von IE. In IE 11 wird alles andere auf der Seite erfasst, mit Ausnahme des Diagramm-Canvas-Elements.

Jede Hilfe zur Verfügung gestellt wird sehr geschätzt.

Screen-Capture-Code:

Funktion SaveHtmlAsImage (item, idx)

{

// ein neues Element Leinwand erstellen

var canvasId = 'canvas' + idx; 

// die SVG erhalten, die muss erfasst werden.

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

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

// Ersetzen Sie das svg mit Canvas-Element auf die Leinwand.

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


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

// Verwenden Sie Html2Canvas, um das gesamte HTML zu erfassen, um es als Bild zu speichern.

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

}); 

}

Bitte geben Sie Ihre Vorschläge, dieses Problem zu beheben.

Answer 1

Ich fand die Ursache für dieses Problem ein anderes SVG-Symbol, das in das Diagramm eingebettet wurde. Ersetzen Sie das SVG-Symbol durch PNG-Bild dieses Problem behoben.

Entschuldigung für die Unannehmlichkeiten. Hoffe es hilft jemandem in Zukunft.