HTML2CanvasがIE11でキャンバスデータをキャプチャしない

Question

HTML2Canvas私のHTMLページのスクリーンショットをキャプチャし、サーバにイメージとして保存します。 私のHtmlには、d3.jsというchart要素とhtml要素が含まれています。 d3.jsチャートはsvgとして生成されるので、svgをキャプチャするために、私はFabric.jsを使ってsvgをcanvas要素に変換します。このプロセスが完了したら、私はHtml2Canvasを使用してWebページ全体をイメージとしてキャプチャし、サーバーに保存します。

ChromeとFFではすべてのプロセスが正常に動作しています。問題は、IEを使用しているときです。 IE 11では、チャートのキャンバス要素を除いて、ページ内のすべてのものがキャプチャされます。

ご協力いただければ幸いです。

スクリーンキャプチャコード：

関数SaveHtmlAsImage（アイテム、IDX）

{

// // SVGを取得し、新しいcanvas要素

var canvasId = 'canvas' + idx; 

を作成していますキャプチャする必要があります。

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

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

//キャンバス要素とSVGを置き換えを使用してキャンバスにSVGを変換。

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


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

//画像として保存するためにHTML全体をキャプチャするには、Html2Canvasを使用します。

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アイコンであることがわかりました。 svgアイコンをpngイメージに置き換えると、この問題が修正されました。

ご迷惑をお掛けして申し訳ございません。 将来誰かを助けてくれることを願っています。