將SVG轉換爲PNG圖像

Question

我使用html2canvas和canvg插件將角度nvd3圖表轉換爲svg，但是當我將餅圖轉換爲png時，我看起來與圖表相同，但是當我將折線圖或區域圖表轉換爲其背景時黑色和一些圈子淹沒在圖像上。 我的代碼是

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.className = "tempHide"; 
       $(this).attr('class', 'tempHide'); 
       $(this).hide(); 
      }); 


      html2canvas($("#container"), { 
       onrendered: function (canvas) { 
        var a = document.createElement("a"); 
        a.download = "Dashboard.png"; 
        a.href = canvas.toDataURL("image/png"); 
        a.click(); 
        var imgData = canvas.toDataURL('image/png'); 

        var doc = new jsPDF('p', 'mm','a4'); 
        var width = doc.internal.pageSize.width;  
        var height = doc.internal.pageSize.height; 

        doc.addImage(imgData, 'PNG', 0, 0, width, height); 
        doc.save('Dashboard.pdf'); 
       } 
      }); 

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

幫助我的傢伙。 預先感謝