Чи є спосіб надати HTML на зображення, як PNG? Я знаю, що це можливо з canvas, але я хотів би надати стандартний HTML-елемент, наприклад, div.

Я знаю, що це досить давнє запитання, на яке вже є багато відповідей, але я все ще витрачав години, намагаючись реально зробити те, що хотів:

• задавши файл HTML, генеруйте (png) зображення з прозорим фоном з командного рядка

Використовуючи Chrome без голови (версія 74.0.3729.157 на цю відповідь), це насправді просто:

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

Пояснення команди:

• ви запускаєте Chrome з командного рядка (тут показано для Mac, але припускаючи подібне в Windows або Linux)
• --headless запускає Chrome, не відкриваючи його, і закривається після завершення команди
• --screenshotзробить знімок екрана (зверніть увагу, що він генерує файл, званий screenshot.pngу папці, де виконується команда)
• --window-sizeдозволяють захоплювати лише частину екрана (формат є --window-size=width,height)
• --default-background-color=0це чарівний трюк, який спонукає Chrome використовувати прозорий фон, а не білий колір за замовчуванням
• нарешті, ви надаєте файл html (як URL-адресу або локального, або віддаленого ...)

Так. HTML2Canvas існує для візуалізації HTML <canvas>(який ви можете використовувати як зображення).

ПРИМІТКА. Існує відома проблема, що це не працюватиме з SVG

Я можу порекомендувати бібліотеку 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);
    });

Варіантів дуже багато, і всі вони мають свої плюси і мінуси.

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

• dom-to-image
• wkhtmltoimage (входить до інструменту wkhtmltopdf)
• IMGKit (для рубіну та на основі wkhtmltoimage)
• imgkit (для python та на основі wkhtmltoimage)
• python-webkit2png
• ...

Плюси

• Перетворення відбувається досить швидко більшу частину часу

Мінуси

• Погане відображення
• Не виконує JavaScript
• Немає підтримки останніх веб-функцій (FlexBox, Додаткові селектори, Веб-шрифти, Розміри коробки, Медіа-запити, ...)
• Іноді не так просто встановити
• Складний в масштабі

Варіант 2: Використовуйте PhantomJs і, можливо, бібліотеку обгортки

• PhantomJs
• node-webshot (бібліотека обгортки JavaScript для PhantomJs)
• ...

Плюси

• Виконати Javascript
• Досить швидко

Мінуси

• Погане відображення
• Немає підтримки останніх веб-функцій (FlexBox, Додаткові селектори, Веб-шрифти, Розміри коробки, Медіа-запити, ...)
• Складний в масштабі
• Не так легко змусити його працювати, якщо є завантажувані зображення ...

Варіант 3: Використовуйте Chrome Headless і, можливо, бібліотеку для обгортки

• Chrome без голови
• chrome-devtools-протокол
• Puppeteer (бібліотека обгортки JavaScript для Chrome без голови)
• ...

Плюси

• Виконати Javascript
• Поруч ідеальна візуалізація

Мінуси

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

Варіант 4: Використовуйте API

• ApiFlash (на основі хрому)
• EvoPDF (має опцію для html)
• Грабзіт
• HTML / CSS до API зображення
• ...

Плюси

• Виконати Javascript
• Поруч ідеальна візуалізація
• Швидкий при правильному використанні параметрів кешування
• Шкала обробляється API
• Точні терміни, вікно перегляду, ...
• Більшу частину часу вони пропонують безкоштовний план

Мінуси

• Не безкоштовно, якщо ви плануєте їх багато використовувати

Розкриття інформації: Я засновник ApiFlash. Я зробив усе можливе, щоб дати чесну та корисну відповідь.

У всіх відповідях, що використовуються сторонніми бібліотеками, в той час як надання HTML зображення може бути порівняно простим у чистому Javascript. Про це навіть було написано статтю в розділі полотна на MDN.

Хитрість у цьому:

• створіть SVG з вузлом ForeignObject, що містить ваш XHTML
• встановити src зображення на URL-адресу даних цього SVG
• drawImage на полотно
• встановити дані полотна для націлювання 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()
}

Деякі речі, які слід зазначити

• HTML всередині SVG повинен бути XHTML
• З міркувань безпеки SVG як URL-адреса зображення зображення виступає ізольованою областю CSS для HTML, оскільки жодні зовнішні джерела не можуть бути завантажені. Таким чином, шрифт Google, наприклад , повинен бути вбудованими з допомогою такого інструменту , як цей .
• Навіть коли HTML всередині SVG перевищує розмір зображення, він буде правильно малювати на полотні. Але фактичну висоту неможливо виміряти з цього зображення. Рішення з фіксованою висотою буде працювати чудово, але динамічна висота потребує трохи більше роботи. Найкраще - передати дані SVG у рамку iframe (для ізольованої області CSS) та використати отриманий розмір для полотна.

Ви можете використовувати PhantomJS , який є безголовим вебкітом (двигун візуалізації в сафарі та (до недавнього часу) хром). Ви можете дізнатися , як зробити знімок екрана сторінок тут . Сподіваюся, що це допомагає!

Ви можете використовувати інструмент HTML для PDF, наприклад wkhtmltopdf. І тоді ви можете використовувати PDF-файл для створення зображень, таких як imagemagick. Справді, це серверна сторона і дуже звичний процес ...

Єдиною бібліотекою, з якою я працював для 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);
            }
     });

Використовуйте 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-document-into-image-jpg-png-from-canvas/

Я не очікую, що це буде найкращою відповіддю, але це здавалося досить цікавим для публікації.

Напишіть програму, яка відкриє ваш улюблений браузер до потрібного документа HTML, розмір вікна належним чином та знімок екрана. Потім видаліть межі зображення.

Використовуйте цей код, він обов'язково спрацює:

<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

Ви не можете це зробити 100% точно лише з JavaScript.

Там є інструмент Qt Webkit та версія 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];
}];

Сподіваюся, це допомагає!

Встановіть 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

HtmlToImage.jar стане найпростішим способом перетворення html у зображення

Перетворення HTML у зображення за допомогою Java

Ви можете додати до свого проекту посилання HtmlRenderer і зробити наступне,

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