Rastern ein fragment von HTML zu PNG

Ich habe eine Seite mit einer Reihe von divs. Die einzelnen div-stellt ein dia in einen dia-deck. Ich brauche eine Reihe von Miniaturansichten, eine für jede Folie. Idealerweise werden diese Bilder gerastert würden-Versionen der Folien: eine PNG - data: url wäre perfekt. Ich möchte die Arbeit im browser, und ich bin okay mit Dingen, die nur in einem der modernen Browsern (z.B. chrome oder firefox). Ich vermute, dass dies unmöglich ist, aber würde gerne hören, sonst.

Die Methode toDataURL() auf das canvas-Objekt ist im wesentlichen, was ich will, aber die divs in Frage, die nicht Instanzen von canvas, also das wird nicht funktionieren.

InformationsquelleAutor Benson | 2011-02-20
  1. 3

    Ist es nicht möglich, auf der client-Seite, da dies verboten ist, zum Schutz vor möglichen Betrügereien wie für ie-Skript, das würde einen screenshot Ihrer Seite mit einigen privaten Daten und senden Sie es Gott weiß wo.

    Obwohl...

    • es ist möglich, kopieren Sie die ganze HTML zu verwenden, es als thumb Vorschau/was auch immer und die Verwendung der CSS3-Transformationen (Skalierung) + add overlay über es zu verhindern, dass Interaktionen/Textauswahl usw. zu imitieren, um ein thumbnail von einem div.

    • und es gab eine option in firefox/chrome-Erweiterungen auf Seite speichern, um ein Bild - wenn auch nicht sicher, ob es war möglich, nur einen Teil der Seite als Bild

    • oder kann man immer tun, wie google auf seiner suchergebnis-Seite mit Ihrer Seite Vorschau (klicken Sie auf die Lupe in der Nähe der Ergebnis Titel) - haben eine Roboter-Maschine, die in die Seite und macht einen screenshot von was auch immer zu produzieren, die Vorschau der Seite mit dieser Daten - nicht wissen, wie viel Sie WOLLEN zu tun, aber wenn Sie wollte, dass es so schlimm ist... 🙂

    Ich fürchte, es gibt keinen einfachen Weg, das zu tun, was Sie wollen, und die CSS3-trick scheint zu sein, der am einfachsten zu ziehen.

    • Danke, das ist gute info. Leider, css3 skalieren vermasselt die jqueryui ziehbar-plugin, das ist sozusagen der Punkt der thumbnail-Idee in den ersten Platz. Da die Elemente auf den Folien sind absolut positioniert, wird es ziemlich hässlich, zu versuchen, es zu tun, ohne zu skalieren. Es muss in Echtzeit geschehen und auch, wenn der browser im offline-Modus, also serverside funktioniert nicht. Ich kann nicht Benutzer installieren Sie alle Erweiterungen, so dass wird nicht funktionieren. Ich denke, ich werde schauen in die Festsetzung der ziehbar + Skalierung Fehler.
    • Durch die Art und Weise, diese (unbeantwortete) Frage beschäftigt, wie das zu tun, was ich brauchen mit verkleinerte html-Elemente: stackoverflow.com/questions/4987050/...
    InformationsquelleAutor Tom Tu
  2. 9

    Eine Lösung kann sein, HTML zu Rendern auf eine Leinwand, durch die Einbettung der HTML-Daten in ein SVG-Bild als <foreignObject> und dann zeichnen Sie das resultierende Bild über ctx.drawImage().

    Lesen Sie die Artikel auf MDN hier, oder werfen Sie einen Blick auf rasterizeHTML.js die eine Implementierung Sprach Ansatz.

    Die Einschränkungen sind, dass Ihre Inhalte sollten alle gleichen Ursprungs reinigen (d.h. zugänglich durch AJAX).

    Disclaimer: ich bin der Autor rasterizeHTML.js.

    InformationsquelleAutor cburgmer
  3. 0

    können Sie "Rastern" html in eine <canvas> - element ist in javascript mit der rasterizeHTML Bibliothek:
    http://cburgmer.github.io/rasterizeHTML.js/

    • Herzlich willkommen auf StackOverflow. Wenn Sie eine Frage beantworten, stellen Sie sicher, fügen Sie einige neue Informationen. Es scheint, dass Ihre Lösung das gleiche wie cburgmer der hier
    InformationsquelleAutor naldir
Schreibe einen Kommentar