Question

我的功能非常完美，但不适用于我的范围：

function _svgToCanvas() {
    var nodesToRecover = [];
    var nodesToRemove = [];

    var svgElems = document.getElementsByTagName('svg');

    for (var i = 0; i < svgElems.length; i++) {
        var node = svgElems[i];
        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);
    }
}

我试图修改它以使用来自param的本地代码，如下所示：

function _svgToCanvas(content) {
    var nodesToRecover = [];
    var nodesToRemove = [];

    var svgElems = content.getElementsByTagName('svg');

    for (var i = 0; i < svgElems.length; i++) {

    }
    return content;
}

var content = $('#main_contents').get(0); 
result = _svgToCanvas(content);

但我无法修改for循环。如何修改？

Answer 1

看起来像“var svg = parentNode.innerHTML;”没有为函数canvg提供正确的参数。

这段代码来自canvg.js，试试吧。

function _svgToCanvas(content) {
    var svgTags = content.querySelectorAll('svg');
    for (var i=0; i<svgTags.length; i++) {
        var svgTag = svgTags[i];
        var c = document.createElement('canvas');
        c.width = svgTag.clientWidth;
        c.height = svgTag.clientHeight;
        svgTag.parentNode.insertBefore(c, svgTag);
        svgTag.parentNode.removeChild(svgTag);
        var div = document.createElement('div');
        div.appendChild(svgTag);
        canvg(c, div.innerHTML);
    }    
    return content;    
}

此功能不会更改原始内容，只返回一个新的dom节点。

function _svgToCanvas(content) {
     var newContent = content.cloneNode(true);
     var svgTags = newContent.querySelectorAll('svg');
     var svgTagsOriginal = content.querySelectorAll('svg');
     for (var i=0; i<svgTags.length; i++) {
         var svgTag = svgTags[i];
         var svgTagOriginal = svgTagsOriginal[i];
         var c = document.createElement('canvas');
         c.width = svgTagOriginal.clientWidth;
         c.height = svgTagOriginal.clientHeight;
         svgTag.parentNode.insertBefore(c, svgTag);
         svgTag.parentNode.removeChild(svgTag);
         content.appendChild(c);
         var div = document.createElement('div');
         div.appendChild(svgTag);
         canvg(c, div.innerHTML);
     }

     return newContent;     
}

修改本地HTML代码的功能

1 个答案: