Вопросы Теги

Как конвертировать html-страницу в файл png? [Дубликат]

Что это такое?

blockquote>

Это потому, что вы объявили этот класс последним классом из-за того, что он показывает эту пиктограмму.

Как удалить значок булавки?

blockquote>

Если вы удалите последнее ключевое слово, чем этот значок будет удален.

Посмотрите описание символов используется в студии android

85
задан Martin Delille 23 May 2012 в 15:19
поделиться

14 ответов

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

ПРИМЕЧАНИЕ. Известна проблема, что это не будет работать с SVG

87
ответ дан Jerad Rutnam 4 September 2018 в 09:42
поделиться

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

12
ответ дан Stoffe 4 September 2018 в 09:42
поделиться

Есть много вариантов, и у всех есть свои про и минусы.

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

Плюсы

  • Конверсия выполняется довольно быстро в большинстве случаев

Минусы

  • Плохая рендеринга
  • Не выполняется javascript
  • Нет поддержки последних веб-функций (FlexBox, расширенные селектора, веб-сайты, размер окна, медиа-запросы, ...)
  • Иногда не так просто установить
  • Сложно масштабировать

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

Плюсы

  • Выполнить Javascript
  • Полностью fas t

Против

  • Плохая рендеринг
  • Отсутствует поддержка последних веб-функций (FlexBox, расширенные селекторные, веб-сайты, размер окна, медиа Запросы, ...)
  • Сложно масштабировать
  • Не так легко заставить его работать, если есть изображения для загрузки ...

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

Плюсы

  • Выполнить Javascript
  • Рядом с идеальным рендерингом

Минусы

  • Не так просто получить желаемый результат относительно:
  • Сложно масштабировать
  • Довольно медленно и даже медленнее, если html содержит внешние ссылки

Вариант 4: Использовать API

Плюсы

  • Выполнять Javascript
  • Рядом с идеальным рендерингом
  • Быстро, когда параметры кеширования используются правильно
  • Масштабирование обрабатывается API
  • Точная синхронизация , viewport, ...
  • Большую часть времени они предлагают бесплатный план

Против

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

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

21
ответ дан Timothée Jeannin 4 September 2018 в 09:42
поделиться

Могу ли я рекомендовать библиотеку 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);
    });
61
ответ дан tsayen 4 September 2018 в 09:42
поделиться

Использовать html2canvas просто включить плагин и метод вызова для преобразования HTML в Canvas, а затем загрузить как изображение 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- документа в образ-JPG-PNG-из-холст /

0
ответ дан Code Spy 4 September 2018 в 09:42
поделиться

Вы, конечно, можете. API JavaScript 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
ответ дан GrabzIt 4 September 2018 в 09:42
поделиться

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

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

5
ответ дан John Fisher 4 September 2018 в 09:42
поделиться

Вы можете добавить ссылку HtmlRenderer в свой проект и сделать следующее: 

string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));
-2
ответ дан kuttalam 4 September 2018 в 09:42
поделиться

Вы не можете сделать это на 100% точно с помощью JavaScript.

Там есть инструмент Qt Webkit из и версия python . Если вы хотите сделать это самостоятельно, у меня был успех с 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];
}];

Надеюсь, что это поможет!

2
ответ дан Lachlan Goodhew-Cook 4 September 2018 в 09:42
поделиться

Используйте этот код, он наверняка сработает: 

<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
ответ дан Mohit Kulkarni 4 September 2018 в 09:42
поделиться
10
ответ дан PinnyM 4 September 2018 в 09:42
поделиться

Установить 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
ответ дан Saurabh Saxena 4 September 2018 в 09:42
поделиться

Рисование объектов DOM в холст показывает быстрый способ выполнить это.

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

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

0
ответ дан Tamir Daniely 4 September 2018 в 09:42
поделиться
5
ответ дан vabanagas 4 September 2018 в 09:42
поделиться
Другие вопросы по тегам:

Похожие вопросы: