Rendu HTML dans Canvas / WebGL

Est-il possible de rendre les éléments HTML en Toile ou WebGL? (similaire à la façon dont on peut tirer un élément vidéo de la texture en WebGL)

source d'informationauteur Derek

  1. 12

    Il est une tentative qui peut faire le travail de près de 80%. Ne parviennent pas à rendre dropdownlist, boutons et quelques autres, mais la plupart des éléments de la page sont affichés.

    Voir et à télécharger ici.

    http://html2canvas.hertzen.com/

    aussi

    http://hertzen.com/experiments/jsfeedback/

  2. 4

    Non, il n'est actuellement pas possible, pas encore.
    Mais il est prévu d'inclure cette fonctionnalité comme l'a souligné dans une vidéo de la 3ème WebGL Camp (à propos de 6:44).

  3. 4

    Vous devriez également vérifier http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html

    Il pourrait jeter une erreur de sécurité dans Chrome, mais fonctionne très bien dans Firefox.

  4. 1

    Utiliser cette bibliothèque https://github.com/PixelsCommander/HTML-GL il est aussi facile que l'enveloppe de votre contenu avec <html-gl> tag.

  5. 1

    J'ai juste pensé que je pourrais ajouter pourquoi.

    C'est la même question que le sale toiles et le moment de l'attaque a été fixé rapidement après WebGL livré

    Avec de la toile en 2d, vous pouvez dessiner des images sur la toile avec ctx.drawImage(someImage, ...); le problème vient de La croix domaine des images. Normalement, le JavaScript ne peut pas lire les pixels à l'intérieur d'une image. Il peut lire les pixels à l'intérieur d'une toile. Donc, pour obtenir les pixels d'une image de tracer d'abord l'image de la toile, puis de lire les pixels de la toile ctx.getImageData(...)

    C'est un problème de sécurité pour le domaine de la croix des images (des images à partir d'autres domaines que le domaine de la page).

    La solution pour canvas 2d est le moment de vous tracer une croix domaine de l'image dans un canvas 2d que la toile est marqué en interne comme sale et les deux ctx.getImageData et canvas.toDataURL lèvera une erreur de sécurité.

    À l'origine de WebGL suivi la même règle. Si vous avez appelé gl.texImageXXX avec une croix domaine de l'image ou un sale toile le webgl toile devrait être marquée comme sale et gl.readPixels ainsi que canvas.toDataURL ne fonctionnerait pas.

    Gens intelligents a souligné que, dans le cas de WebGL, ce n'était pas assez, parce que même si vous ne pouvais pas appeler gl.readPixelsvous pouvez concevoir un shader qui prend plus de temps, basée sur les couleurs les textures c'est l'accès. L'aide que vous pourriez de temps combien de temps il faut pour accéder aux pixels de la texture et efficacement reconstituer le contenu de l'image.

    La solution était que WebGL n'autorise pas l'origine de la croix-des images par défaut. Au lieu de cela, vous avez à la demande de la SCRO (croix-origin resource sharing) la permission de l'autre serveur. Que si elle accorde l'autorisation peut WebGL utiliser l'image.

    Bon, après tout ce que j'espère que vous pouvez voir pourquoi vous ne pouvez pas afficher le code HTML en WebGL. Si vous pouviez rendre le code HTML d'une toile alors vous pouvez utiliser les techniques ci-dessus pour lire le contenu HTML y compris intégrés iframes etc, sale toiles, des images d'autres domaines, etc...