У меня есть веб-страница с изображением jpg, на которой пользователь рисует SVG-каракули поверх Raphael.

Я хочу позволить пользователю сохранить объединенную растеризованную версию этого, когда они будут сделаны (я буду делать что-то еще с версией SVG самостоятельно)

Когда пользователь нажимает кнопку «Сохранить», я хочу добавить это фоновое изображение в сгенерированный SVG DOM в качестве элемента, а затем использовать canvg для записи SVG в элемент canvas. Наконец, я использую метод toDataUrl (), чтобы превратить его в JPG.

Я не могу получить средний бит для работы & # x2014; как лучше всего добавить изображение в DOM? Когда я использую приведенный ниже код, я получаю ошибку JavaScript, которая говорит, что appendChild () не является функцией.

Мне интересно, связано ли это с тем, как я получаю SVG с помощью метода .html () & # x2014; возможно, то, что возвращается, не интерпретируется как настоящий документ SVG ??

Любая помощь высоко ценится.

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

    });