Eu tenho uma página web com uma imagem jpg que o usuário desenhar um doodle SVG em cima de usar Raphael.

Eu quero permitir que o usuário salve uma versão rasterizada mesclada disso quando terminar (eu mesmo farei outra coisa com a versão SVG)

Quando o usuário clica em salvar, eu quero adicionar essa imagem de fundo ao DOM SVG gerado como um elemento e, em seguida, usar canvg para gravar o SVG em um elemento de tela. Finalmente eu uso o método toDataUrl () para transformar isso em um jpg.

Não consigo fazer o bit do meio funcionar - qual é a melhor maneira de adicionar a imagem ao DOM? Quando eu uso o código abaixo, recebo um erro de javascript que diz que appendChild () não é uma função.

Eu estou querendo saber se tem algo a ver com como eu fico com o SVG usando o método .html () - talvez o que é retornado não esteja sendo interpretado como um documento SVG real?

Qualquer ajuda muito apreciada.

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

    });