16

ユーザーがRaphaelを使用する上にSVGDoodleを描画するjpg画像を含むWebページがあります。

完了したら、ユーザーがこれのマージされたラスター化バージョンを保存できるようにしたい（私はSVGバージョンで他のことを自分で行う）

ユーザーが[保存]をクリックしたときに、その背景画像を生成されたSVG DOMに要素として追加し、canvgを使用してSVGをcanvas要素に書き込みます。最後に、toDataUrl（）メソッドを使用してそれをjpgに変換します。

ミドルビットを機能させることができません—画像をDOMに追加するための最良の方法は何ですか？以下のコードを使用すると、appendChild（）が関数ではないというjavascriptエラーが発生します。

.html（）メソッドを使用してSVGを取得する方法と関係があるのではないかと思います。おそらく、返されるものが実際の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});

    });
4

1 に答える 1

34

これを行う1つの方法は次のとおりです。

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS(null,'height','200');
svgimg.setAttributeNS(null,'width','200');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'myimage.jpg');
svgimg.setAttributeNS(null,'x','10');
svgimg.setAttributeNS(null,'y','10');
svgimg.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(svgimg);
于 2012-06-02T02:22:38.867 に答える