Ich habe eine Webseite mit einem JPG-Bild, auf der der Benutzer ein SVG-Gekritzel über Raphael zeichnet.

Ich möchte dem Benutzer erlauben, eine zusammengeführte gerasterte Version davon zu speichern, wenn sie fertig sind (ich werde etwas anderes mit der SVG-Version selbst machen).

Wenn der Benutzer auf Speichern klickt, möchte ich dieses Hintergrundbild als Element zum generierten SVG-DOM hinzufügen und dann mit canvg die SVG-Datei in ein Zeichenflächenelement schreiben. Schließlich benutze ich die toDataUrl () -Methode, um daraus ein jpg zu machen.

Ich kann das mittlere Bit nicht zum Laufen bringen. Wie kann ich das Bild am besten zum DOM hinzufügen? Wenn ich den folgenden Code verwende, erhalte ich einen Javascript-Fehler, der besagt, dass appendChild () keine Funktion ist.

Ich frage mich, ob es etwas damit zu tun hat, wie ich die SVG-Datei mithilfe der .html () -Methode erhalte. Vielleicht wird die zurückgegebene Datei nicht als echtes SVG-Dokument interpretiert.

Jede Hilfe sehr geschätzt.

    function saveImage(){

        var img = document.getElementById('canvas').toDataURL("image/png");
        window.open(img,'Download');

    }

    $('#save').click(function(){

        var svg = $('#editor').html();

        // Create new SVG Image element.  Must also be careful with the namespaces.
        var svgimg = document.createElementNS("http://www.w3.org/2000/svg", "image");
        svgimg.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', "myimage.jpg");


        // Append image to SVG
        svg.appendChild(svgimg);

        canvg('canvas', svg, {renderCallback: saveImage(), ignoreMouse: true, ignoreAnimation: true, ignoreDimensions: true});

    });