HTML2Canvas가 IE11에서 캔버스 데이터를 캡처하지 않습니다.

Question

HTML2Canvas 내 HTML 페이지의 스크린 샷을 캡처하여 서버에 이미지로 저장합니다. 내 Html에는 d3.js 차트 및 html 요소가 포함되어 있습니다. d3.js 차트가 svg로 생성되므로 svg를 캡처하려면 Fabric.js을 사용하여 svg를 canvas 요소로 변환하십시오. 이 프로세스가 완료되면 Html2Canvas를 사용하여 이미지로 전체 웹 페이지를 캡처하고 서버에 저장합니다.

전체 프로세스가 Chrome 및 FF에서 잘 작동합니다. 문제는 IE를 사용할 때입니다. IE 11에서는 차트 캔버스 요소를 제외하고 페이지의 다른 모든 요소가 캡처됩니다.

제공된 도움을 주시면 감사하겠습니다.

화면 캡처 코드 :

기능 SaveHtmlAsImage (항목, IDX)

{

// // SVG를 가져옵니다 새로운 캔버스 요소

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.loadSVGFromString(svg.node().parentNode.innerHTML, function (objects, options) 

Fabric.js

사용하여 캔버스하기 위해 SVG로 변환 {

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

// 이미지로 저장하기 위해 전체 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 이미지로 바꾸면이 문제가 해결되었습니다.

불편을 끼쳐 드려 죄송합니다. 앞으로 도움이되기를 바랍니다.