2017-01-02 209 views
0

我一直在處理這一點,但我似乎無法得到它的工作。點擊結果PNG圖像是空的。看到下面的代碼....嘗試將SVG轉換爲PNG圖像

function svgToCanvas (targetElem,fileName) { 
    var nodesToRecover = []; 
    var nodesToRemove = []; 

    var svgElem = targetElem.find('svg'); 

    console.log(svgElem); 

    svgElem.each(function(index, node) { 
     var parentNode = node.parentNode; 
     var svg = parentNode.innerHTML; 

     var canvas = document.createElement('canvas'); 

     canvg(canvas, svg); 

     nodesToRecover.push({ 
      parent: parentNode, 
      child: node 
     }); 

     parentNode.removeChild(node); 

     nodesToRemove.push({ 
      parent: parentNode, 
      child: canvas 
     }); 

     parentNode.appendChild(canvas); 
    }); 

    html2canvas(targetElem, { 
     allowTaint: true, 
     onrendered: function(canvas) { 

      var theName = fileName + ".png"; 
      prev_img = theName; 

      var a = document.createElement('a'); 
      a.href = canvas.toDataURL(); 
      a.download = theName; 
      a.click(); 

     } 

    }); 

} 

#Running the function.. 
var theDiv = $('#divContainingSVG'); 
var fileNm = "imageName"; 
svgToCanvas(theDiv, fileNm); 

不知道下一步該去哪裏。我只需要將圖像轉換爲png,然後將其保存到服務器。測試下載版本時,生成的png是空白的。請注意,我正在使用... canvg.js(包括rgbcolor.js)和html2canvas.svg.js

在此先感謝!

回答

0

事實上,事實證明,這個功能工作正常。這個問題與另一個功能發生衝突,這個功能被錯誤地包含在svg中。