Mam stronę internetową z obrazem jpg, którą użytkownik narysował doodle SVG na wierzchu używając Raphaela.

Chcę zezwolić użytkownikowi na zapisanie scalonej wersji zrasteryzowanej po zakończeniu (będę sam robił coś innego z wersją SVG)

Gdy użytkownik kliknie save, chcę dodać ten obraz tła do wygenerowanego DOM SVG jako elementu, a następnie użyć canvg, aby zapisać SVG do elementu canvas. Na koniec używam metody toDataUrl (), aby przekształcić ją w jpg.

Nie mogę zmusić środkowego bitu do pracy - jaki jest najlepszy sposób dodania obrazu do DOM? Kiedy używam poniższego kodu, otrzymuję błąd javascript, który mówi, że appendChild () nie jest funkcją.

Zastanawiam się, czy ma to coś wspólnego z tym, jak otrzymuję SVG za pomocą metody .html () - być może to, co jest zwracane, nie jest interpretowane jako prawdziwy dokument SVG?

Każda pomoc bardzo doceniana.

    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});

    });