Question

我一直在处理这个问题，但我似乎无法让它发挥作用。点击生成的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的函数发生冲突。

试图将SVG转换为PNG图像

1 个答案: