2017-01-02 184 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中。