Render HTML-Dokument thumbnail

Ist es möglich, ein Bild von HTML-Dokument mit Javascript zu bekommen. Ich bin auf der Suche nach einer JavaScript-Funktion wie document.getThumbnail() oder window.render(), die eine PNG des HTML-Dokuments zurückgeben.Render HTML-Dokument thumbnail

Quelle

2017-07-03 neckTwi

Es gibt drei verschiedene APIs, die ich empfehlen kann:

Wenn Sie bereit sind, eine Maden Instanz von Chrome zu laufen, können Sie Page.captureScreenshot nennen.() und example code
Wenn Sie innerhalb als Browsererweiterung ausgeführt werden, können Sie die chrome.desktopCapture oder visibleCapture API verwenden. (docs) und example code
Wenn Sie dies in Plan JS tun möchten, können Sie html2canvas verwenden, mit denen Sie HTML dom in eine Canvas-Ansicht konvertieren können, die Sie dann exportieren und als Datei speichern können. Die Screenshots sind jedoch nicht unbedingt genau:

Dieses Skript ermöglicht es Ihnen, "Screenshots" von Webseiten oder Teilen davon direkt im Browser des Benutzers zu erstellen. Der Screenshot basiert auf dem DOM und ist daher möglicherweise nicht 100% ig auf die tatsächliche Darstellung zugeschnitten, da er keinen tatsächlichen Screenshot erstellt, sondern den Screenshot basierend auf den auf der Seite verfügbaren Informationen erstellt.

Quelle

2017-07-03 07:01:55 Nemo

<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=" 
     crossorigin="anonymous"></script> 
     <script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script> 
    </head> 
    <body> 
     <div id="container" style="background-color: aliceblue; max-width:400px;"> 
     <h3> 
      What is Lorem Ipsum? 
     </h3> 
     <hr /> 
     <p> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy 
      text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
     <br/> 
     <h3>SnapShot :</h3> 
     <span id="previewImage"></span> 
     <script> 
     $(document).ready(function() { 
      var element = $("#container"); 
      var getCanvas; 
      html2canvas(element, { 
      onrendered: function (canvas) { 
       $("#previewImage").append(canvas); 
       getCanvas = canvas; 
      } 
      }); 
     }); 
     </script> 
    </body> 
    </html>

Quelle

2017-07-03 12:47:24

dieser Code verwandelt sich innerhalb einer Seite zu einem Bild. Wenn Sie die gesamte Seite erfassen möchten, fügen Sie natürlich id = "container" zum Body-Tag hinzu. hoffe das war hilfreich –

Render HTML-Dokument thumbnail

Antwort

Verwandte Themen