Рендеринг HTML в изображение

Question

Рендеринг HTML в изображение

есть ли способ визуализации html для изображения, как PNG? Я знаю, что это возможно с canvas, но я хотел бы сделать стандартный html-элемент, например div.

14 88

javascript html css image-processing rendering

14 ответов:

Я dom-to-image библиотека, которая была написана исключительно для решения этой проблемы (я сопровождающий).
Вот как вы его используете (еще немного здесь):
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);
    });

62

есть много вариантов и все они имеют свои преимущества и недостатки.

Вариант 1: используйте одну из множества доступных библиотек

dom-to-image

wkhtmltoimage (входит в состав инструмента wkhtmltopdf)

IMGKit (для ruby и на основе wkhtmltoimage)

imgkit (для Python и на основе wkhtmltoimage)

python-webkit2png

...

плюсы

преобразование довольно быстро, большую часть времени

минусы

плохой визуализации

не выполняет javascript

нет поддержки для последних веб-функций (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)

иногда не так просто для установки

сложно шкалы

Вариант 2: Используйте PhantomJs и, возможно, библиотеку обертки

PhantomJs

node-webshot (javascript wrapper library for PhantomJs)

...

плюсы

Выполнить Javascript

довольно быстро

минусы

плохо рендеринг

нет поддержки для последних веб-функций (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)

сложно шкалы

не так легко заставить его работать, если есть изображения для загрузки ...

Вариант 3: Используйте Chrome без головы и, возможно, библиотеку обертки

Хром Безголовый

chrome-devtools-protocol

Кукловод (javascript wrapper library для Chrome headless)

...

плюсы

Выполнить Javascript

почти идеальный рендеринг

минусы

не так легко получить именно тот результат, который вы хотите:

время загрузки страницы

размеры видового экрана

сложно шкалы

довольно медленно и даже медленнее, если html содержит внешние ссылки

Вариант 4: используйте API

ApiFlash (на основе chrome)

EvoPDF (есть опция для html)

Grabzit

...

плюсы

Выполнить Javascript

почти идеальный рендеринг

быстро, когда параметры кэширования правильно используется

масштабирование осуществляется с помощью интерфейсов API

точное время, видовой экран, ...

большую часть времени они предлагают бесплатный план

минусы

не бесплатно, если вы планируете использовать их много

отказ от ответственности: я основатель ApiFlash. Я сделал все возможное, чтобы дать честный и полезный ответ.

24

вы могли бы использовать PhantomJS, который является безголовым webkit (движок рендеринга в safari и (до недавнего времени) chrome) драйвер. Вы можете узнать, как сделать захват экрана страниц здесь. Надеюсь, это поможет!

12

вы можете использовать HTML в PDF инструмент, как wkhtmltopdf. А затем вы можете использовать инструмент PDF to image, такой как imagemagick. По общему признанию, это серверная сторона и очень запутанный процесс...

10

Я не ожидаю, что это будет лучший ответ, но он показался достаточно интересным для публикации.

напишите приложение, которое открывает ваш любимый браузер в нужный документ HTML, правильно определяет размер окна и делает снимок экрана. Затем удалите границы изображения.

5

единственная библиотека, которую я получил для работы в Chrome, Firefox и MS Edge, была rasterizeHTML. Он выводит лучшее качество, что HTML2Canvas и по-прежнему поддерживается в отличие от HTML2Canvas.

получение элемента и загрузка в формате 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);
            }
     });

5

вы не можете сделать это на 100% точно только с JavaScript.

есть Qt Webkit tool out и версия python. Если вы хотите сделать это самостоятельно, у меня был успех с какао:

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

надеюсь, что это помогает!

2

установить phantomjs
$ npm install phantomjs
создать файл github.js со следующим кодом
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();
});
передайте файл в качестве аргумента phantomjs
$ phantomjs github.js

1

Вы, конечно, можете. JavaScript API GrabzIt позволяет захватить div с веб-страницы, как это:
<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>
где #features-это идентификатор div для захвата. Если вы хотите преобразовать HTML в изображение. Вы можете использовать эту технику:
GrabzIt("Your Application Key").ConvertHTML(
"<html><body><h1>Hello World!</h1></body></html>").Create();
отказ от ответственности я построил этот API!

1

рисование объектов DOM на холсте показывает быстрый способ достижения этой цели.

с точки зрения производительности этот метод должен быть свет. Поскольку рендеринг svg и рендеринг dom, по-видимому, могут передавать буферы назад и вперед по мере необходимости. Что имеет смысл, потому что это все основной код.

У меня нет никаких критериев этого, но документы MDN довольно хорошо поддерживаются и не только для геккона. Так что я предполагаю, что вы можете по крайней мере знать, что плохо производительность-это проблема, которая будет решена в какой-то момент.

0

использовать html2canvas просто включите плагин и вызовите метод для преобразования HTML в холст, а затем загрузите как изображение 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();
        });
источник: http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

0

используйте этот код, он обязательно будет работать:
<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>
просто не забудьте включить файл Html2CanvasJS в свою программу. https://html2canvas.hertzen.com/dist/html2canvas.js

0

вы можете добавить ссылкуHtmlRenderer к вашему проекту и сделайте следующее,
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));

-2

AKX · Accepted Answer · 2016-07-12 14:24:27

да. HTML2Canvas существует для отображения HTML на <canvas> (который затем можно использовать в качестве изображения).

Примечание: существует известная проблема, что это не будет работать с SVG