Existe uma maneira de renderizar html para uma imagem como PNG? Eu sei que isso é possível com canvas, mas eu gostaria de renderizar o elemento html padrão como div, por exemplo.
Existe uma maneira de renderizar html para uma imagem como PNG? Eu sei que isso é possível com canvas, mas eu gostaria de renderizar o elemento html padrão como div, por exemplo.
Respostas:
Sei que essa é uma pergunta bastante antiga, que já tem muitas respostas, mas ainda passei horas tentando realmente fazer o que queria:
Usando o Chrome sem cabeça (versão 74.0.3729.157 a partir desta resposta), é realmente fácil:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --screenshot --window-size=256,256 --default-background-color=0 button.html
Explicação do comando:
--headless
executa o Chrome sem abri-lo e sai após a conclusão do comando--screenshot
irá capturar uma captura de tela (observe que ele gera um arquivo chamado screenshot.png
na pasta em que o comando é executado)--window-size
permite capturar apenas uma parte da tela (o formato é --window-size=width,height
)--default-background-color=0
é o truque de mágica que instrui o Chrome a usar um fundo transparente , não a cor branca padrão--screenshot='absolute\path\of\screenshot.png'
trabalhou para mim
Sim. HTML2Canvas existe para renderizar HTML <canvas>
(que você pode usar como imagem).
NOTA: Há um problema conhecido, que não funcionará com SVG
Posso recomendar a biblioteca dom-to-image , que foi escrita apenas para solucionar esse problema (eu sou o mantenedor).
Aqui está como você o usa (um pouco mais aqui ):
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);
});
domtoimage.toSvg
), depois renderize-a na tela e tente brincar com a resolução dessa tela de alguma forma. Provavelmente é possível implementar esse recurso como algum tipo de opção de renderização na própria lib, para que você possa passar as dimensões da imagem em pixels. Se você precisar, agradecemos que você crie um problema no github.
Há muitas opções e todos têm seus prós e contras.
Prós
Contras
Prós
Contras
Prós
Contras
Prós
Contras
Divulgação: Sou o fundador do ApiFlash. Eu fiz o meu melhor para fornecer uma resposta honesta e útil.
Todas as respostas aqui usam bibliotecas de terceiros enquanto a renderização de HTML em uma imagem pode ser relativamente simples em Javascript puro. Não é era ainda um artigo sobre isso na seção de lona no MDN.
O truque é este:
drawImage
na telaconst {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()
}
Algumas coisas a serem observadas
Document
seja convertido em raster (por exemplo, a Canvas
), mas como ninguém se incomodou em padronizá-lo, precisamos recorrer à insanidade, como ilustrado acima (sem ofensa ao autor desta código).
Você pode usar o PhantomJS , que é um driver do kit da web sem cabeça (o mecanismo de renderização no safari e (até recentemente) chrome). Você pode aprender como fazer a captura de tela de páginas aqui . Espero que ajude!
Você pode usar uma ferramenta HTML para PDF como wkhtmltopdf. E então você pode usar um PDF para ferramenta de imagem como imagemagick. É certo que este é o lado do servidor e um processo muito complicado ...
Node.js
. Que tal frontend simples?
A única biblioteca que trabalhei no Chrome, Firefox e MS Edge foi rasterizeHTML . Ele produz uma melhor qualidade que o HTML2Canvas e ainda é suportado, diferentemente do HTML2Canvas.
Obtendo o elemento e fazendo o download como 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);
}
});
rasterizeHTML.drawHTML(node.innerHTML, canvas)
Nota que Im chamando innerHTML no nó
Use html2canvas: inclua o método de plug-in e chamada para converter HTML em Canvas e faça o download como imagem 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();
});
Fonte : http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
Não espero que seja a melhor resposta, mas pareceu interessante o suficiente para postar.
Escreva um aplicativo que abra seu navegador favorito para o documento HTML desejado, dimensione a janela corretamente e faça uma captura de tela. Em seguida, remova as bordas da imagem.
Use este código, ele certamente funcionará:
<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>
Só não se esqueça de incluir o arquivo Html2CanvasJS no seu programa. https://html2canvas.hertzen.com/dist/html2canvas.js
Você não pode fazer isso 100% com precisão apenas com JavaScript.
Existe uma ferramenta Qt Webkit por aí e uma versão em python . Se você quiser fazer isso sozinho, tive sucesso com o cacau:
[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];
}];
Espero que isto ajude!
Instalar phantomjs
$ npm install phantomjs
Crie um arquivo github.js com o seguinte código
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();
});
Passe o arquivo como argumento para phantomjs
$ phantomjs github.js
HtmlToImage.jar será a maneira mais simples de converter um html em uma imagem
Você pode adicionar a referência HtmlRenderer ao seu projeto e fazer o seguinte,
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));