Rendre le code HTML d'une image

Oui. HTML2Canvas existe pour rendre le code HTML sur <canvas> (que vous pouvez ensuite utiliser comme une image).

REMARQUE: Il existe un problème connu, que cela ne fonctionnera pas avec SVG

Il y a beaucoup d'options, et ils ont tous leurs pro et les inconvénients.

Option 1: Utiliser l'une des nombreuses bibliothèques

• dom-to-image
• wkhtmltoimage (inclus dans le wkhtmltopdf outil)
• IMGKit (pour ruby et basé sur wkhtmltoimage)
• imgkit (pour python et basé sur wkhtmltoimage)
• python-webkit2png
• ...

Pros

• De Conversion est assez rapide la plupart du temps

Contre

• Mauvais rendu
• Ne pas exécuter le code javascript
• Pas de support pour les dernières fonctionnalités web (FlexBox, Sélecteurs Avancés, les polices web, la Boîte de Dimensionnement, les Requêtes de Média, ...)
• Parfois pas si facile à installer
• Compliqué à l'échelle

Option 2: Utilisation de PhantomJs et peut-être un wrapper de la bibliothèque

• PhantomJs
• nœud-webshot (javascript bibliothèque d'encapsulation pour PhantomJs)
• ...

Pros

• Exécuter Le Code Javascript
• Assez rapide

Contre

• Mauvais rendu
• Pas de support pour les dernières fonctionnalités web (FlexBox, Sélecteurs Avancés, les polices web, la Boîte de Dimensionnement, les Requêtes de Média, ...)
• Compliqué à l'échelle
• Pas si facile de le faire fonctionner si il y a des images à charger ...

Option 3: Utilisation de google Chrome sans Tête et peut-être un wrapper de la bibliothèque

• Chrome Sans Tête
• chrome devtools-protocole
• Marionnettiste (javascript bibliothèque d'encapsulation pour Chrome sans tête)
• ...

Pros

• Exécuter Le Code Javascript
• Près de rendu parfait

Contre

• Pas si facile d'avoir exactement le résultat voulu concernant:
  • de chargement de la page calendrier
  • fenêtre d'affichage dimensions
• Compliqué à l'échelle
• Assez lent et plus encore si le code html contient des liens externes

Option 4: Utilisation d'une API

• ApiFlash (basé sur chrome)
• EvoPDF (a une option pour le html)
• Grabzit
• HTML/CSS à l'Image de l'API
• ...

Pros

• Exécuter Le Code Javascript
• Près de rendu parfait
• Vite lorsque les options de mise en cache sont utilisées correctement
• Échelle est géré par l'Api
• Moment précis, fenêtre d'affichage, ...
• La plupart du temps, ils offrent un plan de

Contre

• Pas gratuit si vous prévoyez de les utiliser beaucoup

Divulgation: je suis le fondateur de ApiFlash. J'ai fait de mon mieux pour fournir un honnête et utile de répondre.

Vous pouvez utiliser PhantomJS, qui est une tête de webkit (le moteur de rendu de safari et (jusqu'à récemment) chrome) pilote. Vous pouvez apprendre à faire de capture d'écran de pages ici. Espérons que ça aide!

La seule bibliothèque que j'ai eu à travailler pour Chrome, Firefox et MME le Bord était rasterizeHTML. Il produit de meilleure qualité que HTML2Canvas et est toujours pris en charge, à la différence de HTML2Canvas.

Obtenir de l'Élément et le Téléchargement PNG

var node= document.getElementById("elementId");
var canvas = document.createElement("canvas");
canvas.height = node.offsetHeight;
canvas.width = node.offsetWidth;
var name = "test.png"

rasterizeHTML.drawHTML(node.outerHTML, canvas)
     .then(function (renderResult) {
            if (navigator.msSaveBlob) {
                window.navigator.msSaveBlob(canvas.msToBlob(), name);
            } else {
                const a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none";
                a.href = canvas.toDataURL();
                a.download = name;
                a.click();
                document.body.removeChild(a);
            }
     });

Utilisation html2canvas il suffit d'inclure le plugin et l'appel de la méthode pour convertir le code HTML sur une Toile, puis télécharger-image PNG

        html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "manpower_efficiency.jpg";
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
        });

Source: http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

Vous ne pouvez pas le faire à 100% de précision avec JavaScript seul.

Il y a un Qt Webkit outil d' là, et un une version de python. Si vous voulez le faire vous-même, j'ai eu du succès avec le Cacao:

[self startTraverse:pagesArray performBlock:^(int collectionIndex, int pageIndex) {
NSString *locale = [self selectedLocale];
NSRect offscreenRect = NSMakeRect(0.0, 0.0, webView.frame.size.width, webView.frame.size.height);
NSBitmapImageRep* offscreenRep = nil;      
offscreenRep = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:nil
pixelsWide:offscreenRect.size.width
pixelsHigh:offscreenRect.size.height
bitsPerSample:8
samplesPerPixel:4
hasAlpha:YES
isPlanar:NO
colorSpaceName:NSCalibratedRGBColorSpace
bitmapFormat:0
bytesPerRow:(4 * offscreenRect.size.width)
bitsPerPixel:32];
[NSGraphicsContext saveGraphicsState];
NSGraphicsContext *bitmapContext = [NSGraphicsContext graphicsContextWithBitmapImageRep:offscreenRep];
[NSGraphicsContext setCurrentContext:bitmapContext];
[webView displayRectIgnoringOpacity:offscreenRect inContext:bitmapContext];
[NSGraphicsContext restoreGraphicsState];
//Create a small + large thumbs
NSImage *smallThumbImage = [[NSImage alloc] initWithSize:thumbSizeSmall];  
NSImage *largeThumbImage = [[NSImage alloc] initWithSize:thumbSizeLarge];
[smallThumbImage lockFocus];
[[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];  
[offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];  
NSBitmapImageRep *smallThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeSmall.width, thumbSizeSmall.height)];  
[smallThumbImage unlockFocus];  
[largeThumbImage lockFocus];  
[[NSGraphicsContext currentContext] setImageInterpolation:NSImageInterpolationHigh];  
[offscreenRep drawInRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];  
NSBitmapImageRep *largeThumbOutput = [[NSBitmapImageRep alloc] initWithFocusedViewRect:CGRectMake(0, 0, thumbSizeLarge.width, thumbSizeLarge.height)];  
[largeThumbImage unlockFocus];  
//Write out small
NSString *writePathSmall = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_small.png", locale, collectionIndex, pageIndex]];
NSData *dataSmall = [smallThumbOutput representationUsingType:NSPNGFileType properties: nil];
[dataSmall writeToFile:writePathSmall atomically: NO];
//Write out lage
NSString *writePathLarge = [issueProvider.imageDestinationPath stringByAppendingPathComponent:[NSString stringWithFormat:@"/%@-collection-%03d-page-%03d_large.png", locale, collectionIndex, pageIndex]];
NSData *dataLarge = [largeThumbOutput representationUsingType:NSPNGFileType properties: nil];
[dataLarge writeToFile:writePathLarge atomically: NO];
}];

Espérons que cette aide!

Vous pouvez certainement. GrabzIt de l'API JavaScript vous permet de capturer une div dans une page web comme ceci:

<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("Your Application Key").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

Où #caractéristiques est l'ID de la div pour la capture. Si vous vouliez convertir le code HTML d'une image. Vous pouvez utiliser cette technique:

GrabzIt("Your Application Key").ConvertHTML(
"<html><body><h1>Hello World!</h1></body></html>").Create();

Avertissement j'ai construit cette API!

Vous pouvez ajouter une référence HtmlRenderer à votre projet et faire le suivant,

string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));