Usando capturas de tela JavaScript, gostaria de recomendar dois componentes de código aberto aqui: um é o Canvas2Image, que pode programar o desenho de tela e a programação de imagens png/jpeg/bmp; Mas tê -lo sozinho não é suficiente. Precisamos tirar capturas de tela de qualquer DOM (pelo menos a grande maioria), que requer Html2Canvas, que pode converter o objeto DOM em um objeto de tela. Combinando as funções dos dois, você pode levar a captura de tela DOM na página em imagens PNG ou JPEG, o que é muito legal.
Canvas2Image
Seu princípio é usar o objeto HTML5 Canvas para fornecer a API Todataurl ():
A cópia do código é a seguinte:
var strdatauri = ocanvas.todataurl ();
// Retorna "Data: Image/Png; Base64, IVBORW0KGGOAAAAMSUHEUGAAAMGAAADICAYAAACT ..."
O resultado é codificado por Base64 (na verdade, a imagem também pode ser gravada na página dessa maneira na forma de uma string), por isso também precisamos de um LIB codificado por Base64.
No entanto, existem muitos defeitos no momento. Por exemplo, o Opera e o Safari suportam apenas o PNG, enquanto o Firefox é muito melhor de apoio.
Existem duas maneiras de escrever figuras na página. Uma é gerar um objeto de imagem para escrever na árvore da página Dom, que também é um método melhor de apoio:
A cópia do código é a seguinte:
// retorna um elemento <MG> contendo a imagem PNG convertida
var oimgpng = canvas2Image.saveaspng (OCANVAS, true);
Mas se você fizer uma função de captura de tela JavaScript, você poderá abrir automaticamente a caixa de diálogo "Salvar" para salvar o arquivo após a captura de tela:
A cópia do código é a seguinte:
Canvas2Image.saveaspng (OCANVAS);
// levará o usuário a salvar a imagem como PNG.
Chamar esse método gerará um fluxo de dados com o Mimetype "Image/Octet-stream" para o navegador, mas a caixa de diálogo "Salvar" não pode reconhecer o nome apropriado do sufixo da imagem. O arquivo salvo padrão é chamado "xxx.part" no Firefox. Isso é uma pena, mas parece não haver uma boa solução.
html2Canvas
Ele atua no processo de carregamento DOM, coleta as informações e, em seguida, desenha a imagem da tela. Em outras palavras, na verdade não corta a árvore Dom exibida em uma imagem de tela, mas, em vez disso, redigra uma imagem de tela com base na árvore Dom. Portanto, muitos estilos de CSS não podem ser identificados com precisão e não podem ser refletidos com precisão na figura.
Existem muitas outras restrições, como:
● JavaScript deve ser do mesmo domínio. Para situações de domínio cruzado, você precisa usar um servidor proxy (existem parâmetros na API que podem ser especificados) e o mesmo é verdadeiro para a imagem;
● A árvore Dom no quadro não pode ser desenhada com precisão;
● Como você deseja desenhar um diagrama de lona, os navegadores como o IE8 precisam usar bibliotecas de terceiros como o FlashCanvas.
Esta página pode testar o efeito de usá -lo nas capturas de tela em cada site, e o efeito é muito bom:
Exemplos de uso da API:
A cópia do código é a seguinte:
html2Canvas (
[dom1, dom2],
{
registro: false,
USECORES: FALSO,
Proxy: false,
OnRenderted: function (Canvas) {
// tela é o objeto de tela desenhado
}
}
);
Para esse tipo de biblioteca de classe relativamente nicho, a documentação é muito ruim, incluindo a definição da API, que requer a leitura do código -fonte e é escrito claramente no código.
Além disso, há também um plug-in jQuery no pacote de download deste site, que encapsulou essa API e pode ser ignorado.