html2canvasを使用してハイチャートチャートをPDFにレンダリングするとIEとFirefoxで動作しません

Question

html2canvas.jsとhtml2canvas.svg.js（バージョン0.5.0 beta1）とhighcharts.jsを使用してpdfにドーナツチャートをダウンロードしています。

これはChromeで予想通りに動作しますが、IEとFirefoxではこれが動作しません。 IEでは、チャートが間違ってレンダリングされ、Firefoxではレンダリングされません。

は以下

クローム

IE（エッジ）

Firefoxの

クローム、IEとFirefoxでのダウンロードのスクリーンショットです3210

次のように私はhtml2canvasを行うために使用していたコードは次のとおりです。

html2canvas($("#container"), { 
    onrendered: function (canvas) { 
     var imgData = canvas.toDataURL(
     'image/png'); 
     var doc = new jsPDF('p', 'mm'); 
     doc.addImage(imgData, 'PNG', 10, 10); 
     doc.save('sample-file.pdf'); 
    } 
    }); 

私はここでの問題を示していjsFiddleを作成している - http://jsfiddle.net/jko0rs5g/3/

誰もがこの問題を引き起こしている可能性があります何を知っていて、どのように解決することができますか？

EDIT

我々はこのような追加のグラフの上または下の情報、またはスコアとして、Highcartsに追加のHTMLを追加するときのために、これをエクスポートHighchartsで構築を使用していない理由だけではなく、明確にします例えばドーナツの内側にある。私はこれを反映するためにjsfiddleを更新しました。

Answer 1

正しい方向のノーベルのためにPawel Fusのおかげで、私たちはcanvg.jsを使ってこれを動作させました。これはhtml2canvasを呼び出す前にsvgをキャンバスに一時的に置き換えます。

最終的な問題は、svg内のhtmlの中にemを使ってフォントのサイズを決めるときです（残念なことに多くのテンプレートがそうです）。私たちは、svgをキャンバスにレンダリングする前に、元のピクセルサイズにemを使ってフォントサイズを更新します（Get computed font size for DOM element in JS実際のフォントサイズの計算方法については、

以下はダウンロードボタンの更新コードです

$('#download').click(function() { 
    var svgElements = $("#container").find('svg'); 

    //replace all svgs with a temp canvas 
    svgElements.each(function() { 
    var canvas, xml; 

    // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element. 
    $.each($(this).find('[style*=em]'), function(index, el) { 
     $(this).css('font-size', getStyle(el, 'font-size')); 
    }); 

    canvas = document.createElement("canvas"); 
    canvas.className = "screenShotTempCanvas"; 
    //convert SVG into a XML string 
    xml = (new XMLSerializer()).serializeToString(this); 

    // Removing the name space as IE throws an error 
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, ''); 

    //draw the SVG onto a canvas 
    canvg(canvas, xml); 
    $(canvas).insertAfter(this); 
    //hide the SVG element 
    $(this).attr('class', 'tempHide'); 
    $(this).hide(); 
    }); 


    html2canvas($("#container"), { 
    onrendered: function(canvas) { 
     var imgData = canvas.toDataURL(
     'image/png'); 
     var doc = new jsPDF('p', 'mm'); 
     doc.addImage(imgData, 'PNG', 10, 10); 
     doc.save('sample-file.pdf'); 
    } 
    }); 

    $("#container").find('.screenShotTempCanvas').remove(); 
    $("#container").find('.tempHide').show().removeClass('tempHide'); 
}); 

がここにアクションで、それの更新jsfiddleを参照してくださいクリックしてください - http://jsfiddle.net/zuvzcgvz/22/