La création de tables dans un HTML5 Canvas

J'ai un projet où j'ai besoin d'enregistrer un élément de table de html comme une image. Il semblerait que la meilleure façon de le faire est de convertir les données de la table dans une toile et ensuite appeler toDataURL pour obtenir une image. Après une recherche à travers un grand nombre de tableaux mentionnés ici il ressemble à tous d'entre eux il suffit de mettre un wrapper autour d'un régulier de la page html afin de le rendre plus stratégique.

  1. Il n'existe aucun moyen simple ou de la bibliothèque (ce n'est pas de fantaisie) pour extraire des données dans un format tabulaire à l'intérieur d'un élément canvas?
  2. Est-il une autre voie qui me manque pour enregistrer le contenu d'un élément de tableau à une image?

Puisque c'est un des Rails de projet que je préfère, si la bibliothèque JS utilisé JQuery.

MODIFIER

J'ai oublié de mentionner que certaines entrées dans la table des liens. Évidemment, cela fonctionne bien dans un tableau html, mais il doit également travailler dans le canevas version.

EDIT 2

Apparemment, je n'étais pas clair dans la première édition. La version qui s'affiche à l'utilisateur final (tableau ou sur de la toile) doit avoir des liens. L'image finale, évidemment, ne sera pas.

Jon, juste une question pour clarifier: Est-ce votre serveur (php/iis) générer les données de création de la table html? Si oui, vous pourriez envisager de php ou un serveur iis plugin pour exprimer les données en tant que fichier pdf.
Une proposition intéressante, si la toile de rendu ne fonctionne pas, alors je vais essayer. Je suis à l'aide de Rails, donc je suis en fait en insérant les données directement dans le DOM avec ERB.

OriginalL'auteur Jon | 2013-02-11

  1. 8

    Voici un exemple (modifié à partir de: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas)

    http://jsfiddle.net/StEcW/1/

    $(function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
        "<foreignObject width='100%' height='100%'>" + $("#mytable").html() +
        "</foreignObject>" +
        "</svg>";
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], {
        type: "image/svg+xml;charset=utf-8"
    });
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;
});

<div id="mytable">
    <div xmlns="http://www.w3.org/1999/xhtml" style='font-size:12px'>      
        <table border=1 id="amytable">
            <tr>
                <td>Hello</td>
                <td>There</td>
            </tr>        
        </table>
    </div>
</div>

    Cela fonctionne assez bien, mais voir le violon, pour certains, quelque chose d'étrange autour de possible CSS qui pourraient ne pas fonctionner tout à fait raison. Au moins, en Chrome, pour moi, la bordure du tableau ne s'affiche pas de la même façon.

    Modifier: bien sûr, il ne fait pas beaucoup de sens d'aller à travers la toile. La toile est juste l'image que nous avons déjà créé. Tout ce que vous devez faire est d'afficher l'image dans les DOM.

    Malheureusement, cela ne fonctionne pas dans ma situation, que certaines entrées dans la table doivent être des liens. J'ai essayé d'ajouter un a href pour le violon, et il n'a pas s'afficher correctement sur la toile. J'ai mis à jour ma question à ajouter à ce fait.
    Hein? Vous l'avez dit, "...j'ai besoin d'enregistrer un élément de table de html comme une image." Si vous êtes l'enregistrer comme une IMAGE, comment envisagez-vous d'avoir les liens hypertexte de travail...avec une image?
    Désolé je n'étais pas assez précis. La table lors de l'affichage doit avoir des liens. L'image ne fonctionne pas. J'ai été en supposant que je voudrais juste l'exposition de la toile à l'utilisateur, mais je suppose que je ne dois pas. Je peux juste convertir en toile et ensuite de les convertir en une image et l'enregistrer, et l'affichage de la table d'origine de l'utilisateur. Pensez-vous que ce sera le travail?
    C'est ce que j'ai supposé que vous feriez. Je pense que cela fonctionnera.
    Un problème de navigateur -- je crois que Internet Explorer ne prend pas en charge le format svg est <foreignobject>.

    OriginalL'auteur aquinas