Existe-t-il un moyen de rendre du HTML en image comme PNG? Je sais que c'est possible avec canvas mais j'aimerais rendre un élément html standard comme div par exemple.

Je sais que c'est une question assez ancienne qui a déjà beaucoup de réponses, mais j'ai encore passé des heures à essayer de faire ce que je voulais:

• étant donné un fichier html, générer une image (png) avec un fond transparent à partir de la ligne de commande

En utilisant Chrome sans tête (version 74.0.3729.157 à partir de cette réponse), c'est en fait facile:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html

Explication de la commande:

• vous exécutez Chrome à partir de la ligne de commande (ici montré pour le Mac, mais en supposant similaire sur Windows ou Linux)
• --headless exécute Chrome sans l'ouvrir et se ferme une fois la commande terminée
• --screenshotcapturera une capture d'écran (notez qu'il génère un fichier appelé screenshot.pngdans le dossier où la commande est exécutée)
• --window-sizepermet de ne capturer qu'une partie de l'écran (le format est --window-size=width,height)
• --default-background-color=0est le tour de magie qui dit à Chrome d'utiliser un transparent arrière-plan , pas la couleur blanche par défaut
• enfin vous fournissez le fichier html (sous forme d'url locale ou distante ...)

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

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

Puis-je recommander la bibliothèque dom-to-image , qui a été écrite uniquement pour résoudre ce problème (je suis le mainteneur).
Voici comment vous l'utilisez (quelques autres ici ):

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then (function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

Il y a beaucoup d'options et elles ont toutes leurs avantages et leurs inconvénients.

Option 1: utilisez l'une des nombreuses bibliothèques disponibles

• dom-à-image
• wkhtmltoimage (inclus dans l'outil wkhtmltopdf)
• IMGKit (pour ruby ​​et basé sur wkhtmltoimage)
• imgkit (pour python et basé sur wkhtmltoimage)
• python-webkit2png
• ...

Avantages

• La conversion est assez rapide la plupart du temps

Les inconvénients

• Mauvais rendu
• N'exécute pas javascript
• Pas de prise en charge des fonctionnalités Web récentes (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
• Parfois pas si facile à installer
• Compliqué à l'échelle

Option 2: utilisez PhantomJs et peut-être une bibliothèque d'encapsuleurs

• PhantomJs
• node-webshot (bibliothèque de wrapper javascript pour PhantomJs)
• ...

Avantages

• Exécuter Javascript
• Tres rapide

Les inconvénients

• Mauvais rendu
• Pas de prise en charge des fonctionnalités Web récentes (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
• Compliqué à l'échelle
• Pas si facile de le faire fonctionner s'il y a des images à charger ...

Option 3: utilisez Chrome Headless et peut-être une bibliothèque d'encapsuleurs

• Chrome sans tête
• protocole chrome-devtools
• Puppeteer (bibliothèque de wrapper javascript pour Chrome sans tête)
• ...

Avantages

• Exécuter Javascript
• Rendu presque parfait

Les inconvénients

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

Option 4: utiliser une API

• ApiFlash (basé sur chrome)
• EvoPDF (a une option pour html)
• Grabzit
• API HTML / CSS vers Image
• ...

Avantages

• Exécuter Javascript
• Rendu presque parfait
• Rapide lorsque les options de mise en cache sont correctement utilisées
• L'échelle est gérée par les API
• Synchronisation précise, fenêtre d'affichage, ...
• La plupart du temps, ils proposent un plan gratuit

Les inconvénients

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

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

Toutes les réponses ici utilisent des bibliothèques tierces tandis que le rendu HTML sur une image peut être relativement simple en Javascript pur. Il y a même eu un article à ce sujet dans la section canevas de MDN.

L'astuce est la suivante:

• créer un SVG avec un nœud ForeignObject contenant votre XHTML
• définir le src d'une image sur l'url de données de ce SVG
• drawImage sur la toile
• définir les données du canevas sur l'image cible.src

const {body} = document

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = canvas.height = 100

const tempImg = document.createElement('img')
tempImg.addEventListener('load', onTempImageLoad)
tempImg.src = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml"><style>em{color:red;}</style><em>I</em> lick <span>cheese</span></div></foreignObject></svg>')

const targetImg = document.createElement('img')
body.appendChild(targetImg)

function onTempImageLoad(e){
  ctx.drawImage(e.target, 0, 0)
  targetImg.src = canvas.toDataURL()
}

Quelques points à noter

• Le HTML à l'intérieur du SVG doit être XHTML
• Pour des raisons de sécurité, le SVG en tant qu'URL de données d'une image agit comme une portée CSS isolée pour le HTML car aucune source externe ne peut être chargée. Ainsi, une police Google, par exemple, doit être intégrée à l'aide d'un outil comme celui-ci .
• Même lorsque le HTML à l'intérieur du SVG dépasse la taille de l'image, il sera dessiné correctement sur le canevas. Mais la hauteur réelle ne peut pas être mesurée à partir de cette image. Une solution à hauteur fixe fonctionnera très bien, mais la hauteur dynamique nécessitera un peu plus de travail. Le mieux est de rendre les données SVG dans une iframe (pour une portée CSS isolée) et d'utiliser la taille résultante pour le canevas.

Vous pouvez utiliser PhantomJS , qui est un webkit sans tête (le moteur de rendu dans safari et (jusqu'à récemment) le pilote chrome). Vous pouvez apprendre comment effectuer une capture d'écran de pages ici . J'espère que cela pourra aider!

Vous pouvez utiliser un outil HTML vers PDF tel que wkhtmltopdf. Et puis vous pouvez utiliser un outil PDF en image comme imagemagick. Certes, c'est côté serveur et un processus très compliqué ...

La seule bibliothèque que j'ai pu utiliser pour Chrome, Firefox et MS Edge était rasterizeHTML . Il produit une meilleure qualité que HTML2Canvas et est toujours pris en charge contrairement à HTML2Canvas.

Obtention d'un élément et téléchargement au format 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);
            }
     });

Utilisez html2canvas, incluez simplement le plugin et la méthode d'appel pour convertir HTML en Canvas puis téléchargez comme 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/

Je ne m'attends pas à ce que ce soit la meilleure réponse, mais cela semblait assez intéressant pour être publié.

Écrivez une application qui ouvre votre navigateur préféré au document HTML souhaité, dimensionne correctement la fenêtre et prend une capture d'écran. Ensuite, supprimez les bordures de l'image.

Utilisez ce code, cela fonctionnera sûrement:

<script type="text/javascript">
 $(document).ready(function () {
	 setTimeout(function(){
		 downloadImage();
	 },1000)
 });
 
 function downloadImage(){
	 html2canvas(document.querySelector("#dvContainer")).then(canvas => {
		a = document.createElement('a'); 
		document.body.appendChild(a); 
		a.download = "test.png"; 
		a.href =  canvas.toDataURL();
		a.click();
	});	 
 }
</script>

N'oubliez pas d'inclure le fichier Html2CanvasJS dans votre programme. https://html2canvas.hertzen.com/dist/html2canvas.js

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

Il existe un outil Qt Webkit et une version python . Si vous voulez le faire vous-même, j'ai eu du succès avec Cocoa:

[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];
}];

J'espère que cela t'aides!

Installer phantomjs

$ npm install phantomjs

Créez un fichier github.js avec le code suivant

var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
page.open('http://github.com/', function() {
    page.render('github.png');
    phantom.exit();
});

Passez le fichier comme argument à phantomjs

$ phantomjs github.js

HtmlToImage.jar sera le moyen le plus simple de convertir un html en image

Conversion de HTML en image à l'aide de Java

Vous pouvez ajouter une référence HtmlRenderer à votre projet et effectuer les opérations suivantes,

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