Desenhar o HTML numa imagem
Existe uma forma de tornar o html numa imagem como o PNG? Eu sei que é possível com tela, mas eu gostaria de tornar o elemento html padrão como div, por exemplo.
14 answers
<canvas>
(que poderá então usar como imagem).
Nota: Há uma questão conhecida, que não vai funcionar com SVG
Posso recomendar a biblioteca dom-to-image , que foi escrita apenas para resolver este problema (eu sou o mantenedor).
Aqui está como você o usa (mais alguns 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);
});
Opção 1: Usar uma das muitas bibliotecas disponíveis
- dom-a-imagem
- wkhtmltoimage (incluído na ferramenta wkhtmltopdf)
- IMGKit (para ruby e com base no wkhtmltoimage)
- imgkit (para python e baseado em wkhtmltoimage)
- python-webkit2png
- ...
Prós
- a conversão é bastante rápida na maioria das vezes
Cons
- má representação
- não executa javascript
- não existe suporte para funcionalidades Web recentes (FlexBox, selectores avançados, Webfonts, dimensionamento de caixas, consultas multimédia, etc ...)
- Às Vezes não é tão fácil de instalar
- complicado de escalar
- PhantomJs
- node-webshot (javascript wrapper library for PhantomJs)
- ...
Prós
- Executar Javascript
- bastante rápido
Cons
- má representação
- não existe suporte para funcionalidades Web recentes (FlexBox, selectores avançados, Webfonts, dimensionamento de caixas, consultas multimédia, etc ...)
- complicado de escalar Não é assim tão fácil. trabalhe se houver imagens a serem carregadas ...
Opção 3: Usar o Cromo sem cabeça e talvez uma biblioteca de embalagens
- Sem Cabeça Cromada
- cromo-devtools-protocol
- Mestre das Marionetas (biblioteca de papel javascript sem cabeça cromada)
- ...
Prós
- Executar Javascript
- uma representação quase perfeita
Cons
- Não é tão fácil ter exactamente o que se quer. resultado:
- calendário da carga das páginas
- dimensões da área de visualização
- complicado de escalar
- bastante lento e ainda mais lento se o html contiver ligações externas
Opção 4: Utilizar uma API
Prós
- Executar Javascript Quase perfeito renderização
- Rápido quando as opções de cache são usadas correctamente
- a escala é manipulada pela APIs Cronometragem exacta, viewport ,.. A maior parte das vezes oferecem um plano gratuito.
Cons
- não é livre se planeia usá-los muito
Disclaimer: eu sou o fundador do ApiFlash. Fiz o meu melhor para dar uma resposta honesta e útil.
Você pode usar uma ferramenta HTML para PDF como o wkhtmltopdf. E então você pode usar um PDF para ferramenta de imagem como imagemagick. Reconhecidamente este é o lado do servidor e um processo muito complicado...
Escreva um aplicativo que abre o seu navegador favorito para o documento HTML desejado, dimensiona a janela adequadamente e faz uma captura de ecrã. Em seguida, remover os contornos da imagem.
A única biblioteca que consegui trabalhar para o Chrome, o Firefox e o MS Edge foi rasterizeHTML. Ele produz uma melhor qualidade que o HTML2Canvas e ainda é suportado ao contrário do HTML2Canvas.
Obter o elemento e transferir 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);
}
});
Você não pode fazer isso 100% com precisão apenas com JavaScript.
Existe uma ferramenta do Qt Webkit lá fora, e uma versão em python . Se queres ser tu a fazê-lo, 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!
Instale phantomjs
$ npm install phantomjs
Criar um github ficheiro.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();
});
Passa o ficheiro como argumento para o phantomjs.
$ phantomjs github.js
<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>
Onde # recursos é o ID DO div para capturar. Se você quiser converter HTML para uma imagem. Você poderia usar esta técnica:
GrabzIt("Your Application Key").ConvertHTML(
"<html><body><h1>Hello World!</h1></body></html>").Create();
Disclaimer eu construí esta API!
Desenhar os objectos DOM numa tela mostra uma forma rápida de o conseguir.
De um ponto de vista de desempenho, este método deve ser leve. Porque o renderizador svg e o renderizador dom podem aparentemente passar buffers para trás e para a frente, conforme necessário. O que faz sentido, porque é tudo código principal.
Não tenho quaisquer referências a isto, mas os documentos MDN são bastante bem conservados e não só para a gecko. Acho que podes ao menos saber que o mau desempenho é um problema. que será abordado em algum momento.Usar html2canvas apenas incluir o 'plugin' e o método de chamada para converter HTML em área de desenho e depois transferir 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();
});
Origem: http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/
Use este código, ele certamente vai 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>
Não se esqueça de incluir o ficheiro Html2CanvasJS no seu programa. https://html2canvas.hertzen.com/dist/html2canvas.js
Podes Adicionar referência HtmlRenderer para o seu projecto e faça o seguinte,
string htmlCode ="<p>This is a sample html.</p>";
Image image = HtmlRender.RenderToImage(htmlCode ,new Size(500,300));