Obtenha o SVG a partir do elemento canvas e salve-o

Question

Apr 23, 2012, 02:41 AM

Obtenha o SVG a partir do elemento canvas e salve-o

Atualmente estou criando um pequeno aplicativo para um amigo, que está iniciando seu doutorado e precisa construir alguns gráficos de rede. Até agora, tudo funciona bem usando o gráfico Force Directed. Os nós de gráficos podem ser movidos para estilizar o layout.

A coisa que não consigo entender é:

»Como extrair os dados da tela e salvá-los em um arquivo SVG«.

O que eu tentei:

Eu já tentei acessar a imagem Dados do console com

<code>var app.canvas = document.getElementById( 'graph-canvas' )
    .getContext( '2d' )
        .getImageData( 0, 0, 200, 200 );
</code>

e tenho um(object) ImageData em troca. Agora posso acessar os dados da tela mostrados comapp.canvas.data. (Quando eu tento também procurar os valores, o navegador começa a desligar e pergunta se o script deve ser interrompido - Chrome & FF mais recente).

Como eu iria daqui para obter o SVG desenhado e salvo pelo clique de um botão?

EDITAR:

Até agora eu descobri como desenhar o SVG e adicionar umimage/png elemento para isso. Como sempre, não é exibido.

<code>// Add the test SVG el:
var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
svg.setAttribute( 'style', 'border: 1px solid black;' )
        .setAttribute( 'width', '600' )
        .setAttribute( 'height', '400' )
        .setAttributeNS(
            'http://www.w3.org/2000/xmlns/',
            'xmlns:xlink',
            'http://www.w3.org/1999/xlink'
        );

// Call
importCanvas( document.getElementById( 'infovis-canvas' ), svg ); 

// Function: Add data to SVG
function importCanvas( sourceCanvas, targetSVG ) 
{
    // get base64 encoded png data url from Canvas
    var img_dataurl = sourceCanvas.toDataURL( "image/png" );

    var svg_img = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "image"
    );

    svg_img.setAttributeNS(
        'http://www.w3.org/1999/xlink',
        'xlink:href',
        img_dataurl
    );
    jQuery( targetSVG.appendChild( svg_img ) )
        .appendTo( '#graph-container' );

    console.log( 'done' ); // Log & confirm
}
</code>

E finalmente o ...

<code>// ...resulting SVG element containing the image element
<svg style="border: 1px solid black;" width="600" height="400" xlink="http://www.w3.org/1999/xlink"><image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAA(...)
</code>

A interface do usuário funciona com jQuery UI, jQuery eO Jit / InfoVIZ biblioteca, então esses estão disponíveis.