HTML2Canvas無法捕獲IE11中的畫布數據

我使用HTML2Canvas捕獲我的html頁面的截圖並將其作爲圖像保存在服務器中。 My Html包含一個d3.js圖表和html元素。 d3.js圖表生成爲svg，因此爲了捕獲svg，我使用Fabric.js將svg轉換爲canvas元素。完成此過程後，我使用Html2Canvas將整個網頁捕獲爲圖像並將其保存在服務器中。HTML2Canvas無法捕獲IE11中的畫布數據

整個過程在Chrome和FF中都正常工作。問題是使用IE時。在IE 11中，除了圖表畫布元素外，頁面中的其他內容都被捕獲。

提供的任何幫助將不勝感激。

截屏代碼：

功能SaveHtmlAsImage（項目，IDX）

{

//創建一個新的canvas元素

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

//將SVG使用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。

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

});

}

請提供您的建議，以解決此問題。

來源

2017-03-08 GokuSS3

IE Kaiido

@Kaiido：感謝您的快速回復。在去Fabric.js之前我嘗試了canvg.js，但是我的svg是一個複雜的[雷達圖/氣泡圖]。使用canvg.js時，svg到canvas的轉換會引發錯誤。如果我使用canvg，下面是我得到的錯誤。錯誤：對象不支持屬性或方法'getContext'文件：canvg.js – GokuSS3

這個錯誤意味着你沒有提供一個畫布元素作爲參數'canvg（canvasElement，svgString）' – Kaiido

我發現這個問題的根本原因是嵌入在圖表內的另一個svg圖標。用png圖像替換svg圖標解決了這個問題。

抱歉給您帶來不便。希望它可以幫助未來的人。

來源

2017-03-13 12:29:07 GokuSS3

HTML2Canvas無法捕獲IE11中的畫布數據

回答

相關問題