Obtenir SVG à partir d'une toile de l'élément et l'enregistrer

Actuellement, je suis en création d'une petite application pour un ami, dont le départ de son Doctorat, et a besoin de construire un réseau de graphiques. Jusqu'à présent, tout fonctionne très bien à l'aide de la Force de graphe orienté. Les graphiques des nœuds peut être déplacé dans le style de la mise en page.

La chose que je ne peux pas obtenir ma tête autour de est:

»comment extraire les données à partir de la toile et l'enregistrer dans un fichier SVG«.

Ce que j'ai essayé:

J'ai déjà essayé d'accéder aux Données d'image à partir de la console avec

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

et a obtenu un (object) ImageData en retour. Maintenant, je peux accéder à l' ↑ le montre les données du canevas avec app.canvas.data. (Quand j'ai essayer aussi de regarder les valeurs, le navigateur commence la pendaison et demande si le script doit être arrêté - Chrome & FF les plus récentes).

Comment pourrais-je aller à partir d'ici pour obtenir le SVG dessiné puis sauvé par le clic d'un bouton?

EDIT:

Jusqu'à présent, j'ai trouvé comment dessiner le SVG et ajouter un image/png élément. Comment jamais, il n'est pas de l'affichage.

//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
}

Et enfin la...

//...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(...)

L'INTERFACE fonctionne avec jQuery UI, jQuery et le Le Jit/InfoVIZ de la bibliothèque, de sorte que ceux-ci sont disponibles.

pourrait aider svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back
Merci donnera une lecture. Jusqu'à présent, j'ai accès aux données (voir mise à jour).
double possible de Exporter KinteticJS dessin SVG?
Pas de. C'est à propos de l'exportation, de la toile bitmap au format SVG. KineticJS est un vecteur, qui est mort simple à l'exportation. Aussi simple que explorent de PNG à partir ↑.
Merci pour la clarification; de sorte que la question était vraiment "Comment afficher une image bitmap en SVG" et "Comment puis-je créer une image à partir d'une Toile".
N/P. Proximité: Le Q est »Comment créer un SVG vecteur d'image à partir d'une image de la toile élément?« - Point, c'est que j'ai pensé lors de la demande d'abord que chaque toile seules Données SVG. Mon défaut :/

InformationsquelleAutor kaiser | 2012-04-23

9

Si vous souhaitez le conserver comme un vecteur graphique au lieu d'un raster, vous pouvez essayer l'une des bibliothèques, qui traduisent la toile d'API au format svg.

Pour SVGKit:
```
var svgkitContext = new SVGCanvas(150,150);

function draw(ctx) {
   //... normal canvas drawing commands go here ...
}

//draw to SVGKit canvas (svg) instead of canvasElement.getContext("2d")
draw(svgkitContext);
```
Plein en cours d'exécution exemple de la ci-dessus.

Pour toile-svg:
```
var canvasSVGContext = new CanvasSVG.Deferred();
canvasSVGContext.wrapCanvas(document.querySelector("canvas"));
var canvasContext = document.querySelector("canvas").getContext("2d");

function draw(ctx) {
    //... normal canvas drawing commands go here ...
}

//draw to html5 canvas and record as svg at the same time
draw(canvasContext);

//append the svg result
var svg = document.appendChild(canvasContext.getSVG());
```
Plein en cours d'exécution exemple de la ci-dessus.

Pour générer du svg à la place:

Une autre option est de rendre le graphique comme un svg, en premier lieu, d3.js est une bibliothèque javascript qui le rend facile pour ce faire, voir e.g cet exemple d'une force graphe orienté.
- Pourriez-vous peut-être prolonger votre réponse avec un petit exemple de la façon de lancer les données dans la toile de l'objet à l'aide de la première lib? Les deux ressemblent de plus, comme le dessin de libs pour moi et je ne pouvais pas trouver toutes tutoriel ou guid sur la façon de dessiner le SVG à partir d'une toile imageData.
- Erik, lorsque je supprime les liens de votre réponse, votre réponse n'est pas utile d'un seul bit. Auriez-vous l'esprit d'édition d'un jour et de le corriger? Jusqu'à présent, la question a suscité 5k lecteurs et vous pourriez avoir une solution...
- Je pense que votre question est un peu floue. Voulez-vous simplement dessiner une image bitmap (lire: c'est ce qu'données images en toile est) dans un svg? Ou voulez-vous générer vrai graphiques de vecteur de commandes utilisées pour produire de la toile? Dans ce dernier cas, la façon de le faire est d'enregistrer les commandes à l'aide d'un contexte personnalisé objet au lieu de le contexte normal retourné à partir de l'élément canvas.
InformationsquelleAutor Erik Dahlström
6

Si vous êtes limité à ImageData vous êtes hors de la chance, parce que c'est juste un simple réseau de pixels (voir référence). Vous ne pouvez pas obtenir un véritable image SVG à partir de là. Vous pouvez probablement arracher un .png représentation...mais c'est une image statique avec aucune interaction.

Si vous allez faire une sorte de toile d'exportation SVG, il est important de savoir comment vous êtes en train de faire le canevas de dessin. La meilleure approche serait d'utiliser une bibliothèque qui conserve une toile graphe de scène.

Fabric.js semble être un bon choix. Vous pouvez faire le dessin avec de la toile et ensuite appeler canvas.toSVG() et obtenir votre image svg.
- Il semble que vous êtes en droit. Je suppose, je vais avoir besoin de passer d'InfoVis à quelque chose de pixel shuffeling, mais le dessin réel vecteurs...
- Un inconvénient de fabric.js est que vous devez utiliser les méthodes de la bibliothèque par le dessin de la toile, de sorte que vous aurez besoin de modifier votre code.
- Ouais, je suis à la recherche actuellement d'autres bibliothèques qui puisent la Force de les Graphes orientés (pas trop nombreux). Fabric.js est plus un canvas-plain.js et pas sur la liste.
InformationsquelleAutor mihai

Vous devez vous connecter pour publier un commentaire.