Czy istnieje sposób na renderowanie HTML do obrazu, takiego jak PNG? Wiem, że jest to możliwe z płótnem, ale chciałbym renderować standardowy element html, na przykład div.

Wiem, że to dość stare pytanie, które ma już wiele odpowiedzi, a mimo to godzinami próbowałem robić to, co chciałem:

• mając plik html, wygeneruj obraz (png) z przezroczystym tłem z wiersza poleceń

Korzystając z Chrome headless (wersja 74.0.3729.157 z tej odpowiedzi), jest to w rzeczywistości łatwe:

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

Wyjaśnienie polecenia:

• uruchamiasz Chrome z wiersza poleceń (tutaj pokazane dla Maca, ale zakładając podobne w Windows lub Linux)
• --headless uruchamia Chrome bez otwierania go i zamyka po wykonaniu polecenia
• --screenshotprzechwyci zrzut ekranu (pamiętaj, że generuje plik o nazwie screenshot.pngw folderze, w którym polecenie jest uruchamiane)
• --window-sizepozwalają uchwycić tylko część ekranu (format jest --window-size=width,height)
• --default-background-color=0to magiczna sztuczka, która mówi Chrome, że ma używać przezroczystego tła, a nie domyślnego białego koloru
• na koniec podajesz plik html (jako adres URL lokalny lub zdalny ...)

Tak. HTML2Canvas istnieje do renderowania kodu HTML <canvas>(którego można następnie użyć jako obrazu).

UWAGA: istnieje znany problem, że to nie zadziała z SVG

Mogę polecić bibliotekę dom-to-image , która została napisana wyłącznie w celu rozwiązania tego problemu (jestem opiekunem).
Oto jak go używasz (więcej tutaj ):

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);
    });

Opcji jest wiele i wszystkie mają swoje wady i zalety.

Opcja 1: użyj jednej z wielu dostępnych bibliotek

• dom-to-image
• wkhtmltoimage (zawarte w narzędziu wkhtmltopdf)
• IMGKit (dla ruby ​​i oparty na wkhtmltoimage)
• imgkit (dla Pythona i oparty na wkhtmltoimage)
• python-webkit2png
• ...

Plusy

• Konwersja przebiega przez większość czasu dość szybko

Cons

• Złe renderowanie
• Nie wykonuje javascript
• Brak obsługi najnowszych funkcji internetowych (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
• Czasami nie jest tak łatwo zainstalować
• Skomplikowane w skali

Opcja 2: Użyj PhantomJs i być może biblioteki opakowującej

• PhantomJs
• node-webshot (biblioteka javascript wrapper dla PhantomJs)
• ...

Plusy

• Wykonaj JavaScript
• Dosyć szybko

Cons

• Złe renderowanie
• Brak obsługi najnowszych funkcji internetowych (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
• Skomplikowane w skali
• Nie jest łatwo sprawić, by działało, jeśli są obrazy do załadowania ...

Opcja 3: użyj Chrome Headless i być może biblioteki otoki

• Chrome Headless
• chrome-devtools-protocol
• Puppeteer (biblioteka javascript wrapper dla Chrome Headless)
• ...

Plusy

• Wykonaj JavaScript
• Prawie idealne renderowanie

Cons

• Nie jest łatwo uzyskać dokładnie pożądany wynik dotyczący:
  • czas wczytywania strony
  • wymiary rzutni
• Skomplikowane w skali
• Dość wolno, a nawet wolniej, jeśli html zawiera linki zewnętrzne

Opcja 4: użyj interfejsu API

• ApiFlash (oparty na Chrome)
• EvoPDF (ma opcję dla html)
• Grabzit
• Interfejs API HTML / CSS do Image
• ...

Plusy

• Wykonaj JavaScript
• Prawie idealne renderowanie
• Szybko, gdy opcje buforowania są prawidłowo używane
• Skalowanie jest obsługiwane przez interfejsy API
• Dokładny czas, rzutnia, ...
• Przez większość czasu oferują bezpłatny plan

Cons

• Nie za darmo, jeśli planujesz często ich używać

Ujawnienie: jestem założycielem ApiFlash. Zrobiłem co w mojej mocy, aby udzielić uczciwej i użytecznej odpowiedzi.

Wszystkie odpowiedzi tutaj wykorzystują biblioteki stron trzecich, podczas gdy renderowanie HTML do obrazu może być stosunkowo proste w czystym JavaScript. Nie jest nawet artykuł o tym na odcinku płótno na MDN.

Sztuczka jest taka:

• utwórz SVG z węzłem ForeignObject zawierającym Twój XHTML
• ustaw źródło obrazu na adres URL danych tego pliku SVG
• drawImage na płótnie
• ustaw dane kanwy na docelowy image.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()
}

Kilka rzeczy do zapamiętania

• HTML wewnątrz SVG musi być XHTML
• Ze względów bezpieczeństwa plik SVG jako adres URL obrazu działa jako izolowany zakres CSS dla HTML, ponieważ nie można załadować żadnych zewnętrznych źródeł. Na przykład czcionka Google musi być wbudowana za pomocą narzędzia takiego jak to .
• Nawet jeśli kod HTML wewnątrz SVG przekracza rozmiar obrazu, zostanie poprawnie narysowany na płótnie. Ale rzeczywistej wysokości nie można zmierzyć na podstawie tego obrazu. Rozwiązanie o stałej wysokości będzie działać dobrze, ale dynamiczna wysokość będzie wymagać nieco więcej pracy. Najlepiej jest wyrenderować dane SVG w ramce iframe (dla izolowanego zakresu CSS) i użyć wynikowego rozmiaru dla płótna.

Możesz użyć PhantomJS , który jest bezgłowym webkitem (silnik renderujący w Safari i (do niedawna) chrome). Można dowiedzieć się, jak zrobić zrzut ekranu stron tutaj . Mam nadzieję, że to pomoże!

Możesz użyć narzędzia HTML do PDF, takiego jak wkhtmltopdf. Następnie możesz użyć narzędzia PDF do obrazowania, takiego jak imagemagick. Trzeba przyznać, że jest to strona serwera i bardzo zawiły proces ...

Jedyną biblioteką, którą udało mi się pracować dla Chrome, Firefox i MS Edge, była rasterizeHTML . Zapewnia lepszą jakość niż HTML2Canvas i nadal jest obsługiwany w przeciwieństwie do HTML2Canvas.

Pobieranie elementu i pobieranie jako 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);
            }
     });

Użyj html2canvas, po prostu dołącz wtyczkę i wywołaj metodę, aby przekonwertować HTML na Canvas, a następnie pobrać jako obraz 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();
        });

Źródło : http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

Nie spodziewam się, że to będzie najlepsza odpowiedź, ale opublikowanie tego wydawało się wystarczająco interesujące.

Napisz aplikację, która otwiera Twoją ulubioną przeglądarkę na żądany dokument HTML, odpowiednio dopasowuje rozmiar okna i wykonuje zrzut ekranu. Następnie usuń krawędzie obrazu.

Użyj tego kodu, na pewno zadziała:

<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>

Nie zapomnij tylko o dołączeniu pliku Html2CanvasJS do swojego programu. https://html2canvas.hertzen.com/dist/html2canvas.js

Nie możesz tego zrobić w 100% dokładnie za pomocą samego JavaScript.

Jest tam narzędzie Qt Webkit i wersja dla Pythona . Jeśli chcesz to zrobić sam, odniosłem sukces z 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];
}];

Mam nadzieję że to pomoże!

Zainstaluj phantomjs

$ npm install phantomjs

Utwórz plik github.js z następującym kodem

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();
});

Przekaż plik jako argument do phantomjs

$ phantomjs github.js

HtmlToImage.jar będzie najprostszym sposobem konwersji html na obraz

Konwersja HTML do obrazu przy użyciu java

Możesz dodać referencyjny HtmlRenderer do swojego projektu i wykonać następujące czynności,

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