htmltoimage
rc-0.1
Gera uma imagem de um nó DOM usando canvas HTML5 e SVG.
Fork de dom para imagem com código mais sustentável e alguns novos recursos.
npm install --save html na imagem
/* ES6 */import * as htmlToImage from 'html-to-image';importar { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';/* ES5 */var htmlToImage = require(' html para imagem');Todas as funções de nível superior aceitam nó DOM e opções de renderização e retornam uma promessa cumprida com o dataURL correspondente:
paraSvg
toPng
para JPEG
paraBlob
paraPixelData
Vá com os exemplos a seguir.
Obtenha um URL de dados codificado em base64 de imagem PNG e exiba-o imediatamente:
var node = document.getElementById('meu-nó');htmlToImage.toPng(node)
.then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);
})
.catch(function (error) {console.error('oops, algo deu errado!', erro);
});Obtenha um URL de dados codificado em base64 de imagem PNG e baixe-o (usando download):
htmlToImage.toPng(document.getElementById('meu-nó'))
.então(função (dataUrl) {download(dataUrl, 'meu-nó.png');
});Obtenha um blob de imagem PNG e baixe-o (usando FileSaver):
htmlToImage.toBlob(document.getElementById('meu-nó'))
.then(função (blob) {window.saveAs(blob, 'meu-nó.png');
});Salve e baixe uma imagem JPEG compactada:
htmlToImage.toJpeg(document.getElementById('meu-nó'), { qualidade: 0,95 })
.then(function (dataUrl) {var link = document.createElement('a');link.download = 'my-image-name.jpeg';link.href = dataUrl;link.click();
}); Obtenha um URL de dados SVG, mas filtre todos os elementos <i> :
filtro de função (nó) {
return (node.tagName! == 'i');}htmlToImage.toSvg(document.getElementById('meu-nó'), { filtro: filtro })
.then(function (dataUrl) {/* faça alguma coisa */
});Obtenha os dados brutos de pixel como um Uint8Array com cada 4 elementos da matriz representando os dados RGBA de um pixel:
var node = document.getElementById('meu-nó');htmlToImage.toPixelData(node)
.then(função (pixels) {for (var y = 0; y < node.scrollHeight; ++y) { for (var x = 0; x < node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);/* pixelAtXY é um Uint8Array[4] contendo valores RGBA do pixel em (x, y) no intervalo 0..255 */pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
});Obtenha um HTMLCanvasElement e exiba-o imediatamente:
htmlToImage.toCanvas(document.getElementById('meu-nó'))
.then(função (canvas) {document.body.appendChild(canvas);
});Uma função que leva o nó DOM como argumento. Deve retornar verdadeiro se o nó passado for incluído na saída. Excluir o nó significa excluir seus filhos também.
Não chamado no nó raiz.
Um valor de string para a cor de fundo, qualquer valor de cor CSS válido.
Largura e altura em pixels a serem aplicadas ao nó antes da renderização.
Um objeto cujas propriedades serão copiadas para o estilo do nó antes da renderização. Você pode querer verificar esta referência para nomes JavaScript de propriedades CSS.
Um número entre 0 e 1 que indica a qualidade da imagem (por exemplo, 0.92 => 92% ) da imagem JPEG.
O padrão é 1.0 ( 100% )
Defina como true para anexar a hora atual como uma string de consulta às solicitações de URL para ativar o impedimento de cache.
O padrão é false
Uma URL de dados para uma imagem de espaço reservado que será usada quando a busca de uma imagem falhar.
O padrão é uma string vazia e renderizará áreas vazias para imagens com falha.
Ele foi testado no Chrome e Firefox mais recentes (49 e 45 respectivamente no momento da escrita), com o Chrome apresentando desempenho significativamente melhor em grandes árvores DOM, possivelmente devido ao suporte SVG de melhor desempenho e ao fato de suportar a propriedade CSSStyleDeclaration.cssText .
O Internet Explorer não é (e não será) compatível, pois não suporta a tag SVG <foreignObject> .
O Safari não é compatível, pois usa um modelo de segurança mais rígido na tag <foreignObject> . A solução sugerida é usar toSvg e renderizar no servidor.
Somente a lib padrão é usada atualmente, mas certifique-se de que seu navegador suporte:
Promessa
Etiqueta SVG <foreignObject>
Poderá algum dia existir (ou talvez já exista?) uma maneira simples e padrão de exportar partes do HTML para imagem (e então este script só pode servir como uma evidência de todos os obstáculos que tive que passar para obter tal coisa óbvia feita), mas não encontrei nenhuma até agora.
Esta biblioteca usa um recurso do SVG que permite ter conteúdo HTML arbitrário dentro da tag <foreignObject> . Portanto, para renderizar esse nó DOM para você, são executadas as seguintes etapas:
Clone o nó DOM original recursivamente
Calcule o estilo do nó e de cada subnó e copie-o para o clone correspondente
e não se esqueça de recriar pseudoelementos, pois eles não são clonados de forma alguma, claro
Incorporar fontes da web
encontre todas as declarações @font-face que podem representar fontes da web
analisar URLs de arquivos, baixar arquivos correspondentes
codificação base64 e conteúdo embutido como dataURLs
concatene todas as regras CSS processadas e coloque-as em um elemento <style> e, em seguida, anexe-o ao clone
Incorporar imagens
incorporar URLs de imagem em elementos <img>
imagens embutidas usadas na propriedade CSS background , de maneira semelhante às fontes
Serialize o nó clonado para XML
Coloque o XML na tag <foreignObject> , depois no SVG e torne-o um URL de dados
Opcionalmente, para obter conteúdo PNG ou dados brutos de pixel como um Uint8Array, crie um elemento Image com o SVG como fonte e renderize-o em uma tela fora da tela, que você também criou, e depois leia o conteúdo da tela
Feito!
Se o nó DOM que você deseja renderizar incluir um elemento <canvas> com algo desenhado nele, ele deverá ser tratado corretamente, a menos que a tela esteja contaminada - neste caso, a renderização não será bem-sucedida.
A renderização falhará em DOM enorme devido ao limite de dataURI variar.
Solicitações pull e estrelas são muito bem-vindas.
Para bugs e solicitações de recursos, crie um problema.
