尝试将 SVG 转换为 PNG 图像

Question

我一直在处理这个问题，但我似乎无法让它工作。 Onclick 到生成的 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

提前致谢！

Answer 1

实际上，这个函数运行良好。问题是与另一个函数发生冲突，该函数被错误地包含在获取 svg 中。