Gostaria de saber como tirar print de uma página, e salvar em imagem.
Segue exemplo para entendimento:
Gostaria de saber como tirar print de uma página, e salvar em imagem.
Segue exemplo para entendimento:
É possível desenhar os SVGs dentro do Canvas, porém ao momento que usamos <foreignObject>
, os navegadores WebKit
e Blink/Chromium
tem bloqueios de segurança quanto o uso disto, ou seja você pode desenhar, mas não pode usar toDataURI
(no Firefox funciona se você usar CORS).
O exemplo a seguir é simples, adquirido no MDN, para usar <link>
(folhas de estilo) e propriedades CSS será necessário converte-las em <style>
e converter os url(...)
para o Data URI Scheme
e mesmo assim fontes de texto não serão suportados (por incrível que pareça eu estou trabalhando a alguns meses em uma biblioteca que faz tudo isto, tira "foto" da página usando SVG, só parei por causa da questão das web-fontes, que é bem difícil de embutir no SVG), portanto você pode tentar, mas funcionará somente em navegadores com o motor Gecko (usado Firefox) e ainda será um pouco trabalhoso de importar, mas efeitos CSS e HTML todos funcionarão provavelmente, segue exemplo simples:
var DOMURL = window.URL || window.webkitURL || window;
if (!('createObjectURL' in DOMURL)) throw new Error('Sem suporte a createObjectURL');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
Para exportar a imagem você pode usar:
Note que para usar o SVG é necessário um HTML (ou melhor XHTML) válido, para isto use este script:
var doc = document.implementation.createHTMLDocument("");
//Adicione o seu html, como por exemplo document.documentElement.innerHTML
doc.write(STRING DO CONTEUDO HTML);
doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);
var html = (new XMLSerializer).serializeToString(doc);
var docWidth = Math.max(document.documentElement.clientWidth,
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth);
var docHeight = Math.max(document.documentElement.clientHeight,
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight);
var data = '<svg xmlns="http://www.w3.org/2000/svg" ' +
'width="' + docWidth + '" height="' + docHeight + '">' +
'<foreignObject width="100%" height="100%">' +
html +
'</foreignObject>' +
'</svg>';
Você pode usar o html2canvas, note que ele não tira uma foto real, mas sim tenta redesenhar os elementos da página, note que as demais respostas estão corretas, mas os exemplos provavelmente não funcionarão na versão atual do html2canvas, pois várias funções foram modificadas e passou a usa o
es6-promise
Recomendo baixar a versão 0.5.0-alpha2 em https://github.com/niklasvh/html2canvas/releases e incluir na página que vai precisar tirar a "foto", deve ficar algo como:
<script src="html2canvas.js"></script>
html2canvas(document.getElementById("id-do-meu-elemento"), {
"logging": true //Habilita os logs
}).then(function(canvas) {
var img = new Image();
img.onload = function () {
img.onload = null;
document.getElementById("output").appendChild(img);
};
img.src = canvas.toDataURL("image/png");
});
Porém pode haver casos que a imagens sejam de diferentes domínios, será necessário usar CORS
, então teremos que usar proxy.
Proxy neste caso não é a tecnologia para usar um ip diferente na sua máquina, mas sim um script que roda no servidor e exibe a imagem do domínio externo como se estive-se no seu domínio, ou mesmo que sejam três domínios seu-site.com
, maps.google.com
e proxy.seu-site.com
ele faz o uso de CORS
ou do data URI scheme
.
Eu desenvolvi quatro proxys em linguagens diferentes:
O uso seria algo como (exemplo com aspx
):
html2canvas(document.getElementById("ID-DO-ELEMENTO"), {
"logging": true, //Habilita os logs
"proxy":"html2canvasproxy.ashx"
}).then(function(canvas) {
var img = new Image();
img.onload = function () {
img.onload = null;
document.getElementById("output").appendChild(img);
};
img.src = canvas.toDataURL("image/png");
});
Lista de opções estras para usar em html2canvas(..., {opções}).then(...)
Opção | Tipo | padrão | Descrição |
---|---|---|---|
allowTaint |
boolean |
false |
Permite causar o taint quando houver imagens cross-origin |
background |
string |
#fff |
Troca a cor de fundo do canvas, se não espeficicado no dom use undefined para transparente |
height |
number |
null |
Limita a altura do em pixels. Se null irá renderezar com a altura total da janela |
letterRendering |
boolean |
false |
Usado para renderizar cada letra separadamente. É necessário se estiver usando letter-spacing |
logging |
boolean |
false |
Quando true mostra log no console do navegador |
proxy |
string |
undefined |
A url do proxy é usa da para carregar imagens cross-origin. Se não definido ou vazio as imagens não serão carregadas |
taintTest |
boolean |
true |
Testa cada imagem para antes de desenhar, para verificar se irá manchar o <canvas> |
timeout |
number |
0 |
Tempo de espera para o carregamento das imagens em milesegundos. Se 0 não haverá esperar |
width |
number |
null |
Limita a largura do em pixels. Se null irá renderezar com a largura total da janela |
useCORS |
boolean |
false |
Se true tenta carregar as imagens com cross-origem, se não tenta usar o proxy |
Com exceção do SVG + Canvas, nenhuma biblioteca tem suporte suficiente ainda para simular os efeitos HTML e CSS dos navegadores ainda e mesmo que consiga isto, ainda será sujeita a BUGs ou não conseguirá acompanhar os motores dos web-browsers em tempo real, pois é tudo "simulado".
Conforme está minha resposta no https://pt.stackoverflow.com/a/63018/3635 para fazer o upload de um imagem em canvas, faça o seguinte processo:
function uploadAjax(data, fileName, success, error)
{
var oReq = new XMLHttpRequest();
oReq.open("POST", "upload.php?filename=" + fileName, true);
oReq.onreadystatechange = function() {
if (oReq.readyState === 4) {
if (oReq.status === 200) {
success(oReq.responseText);
} else {
error(oReq.status);
}
}
};
oReq.send(data);
}
html2canvas(document.getElementById("id-do-meu-elemento"), {
"logging": true //Habilita os logs
}).then(function(canvas) {
uploadAjax(
canvas.toDataURL("image/jpeg").replace(/^data[:]image\/(.*);base64,/, ""),
"photo.jpg", function(response) {
if (response === "OK") {
alert("sucesso");
} else {
alert("Ajax: " + response);
}
}, function(errStatus) {
alert("erro: " + errStatus);
});
});
Troque
image/jpeg
pelo formato que desejar, por exemploimage/gif
ouimage/png
, assim por exemplo:canvas.toDataURL("image/png")
PHP para upload:
<?php
define('PASTA_UPLOAD', '/home/user/projeto/data');
if (isset($_GET['filename']) && $_SERVER['REQUEST_METHOD'] === 'POST') {
$cl = (int) $_SERVER['CONTENT_LENGTH'];
$tmpFile = tempnam(sys_get_temp_dir(), '~upload-');
$file = fopen($tmpFile, 'w');
$fh = fopen('php://input', 'r');
if ($file && $fh) {
$data = '';
while (FALSE === feof($fh)) {
$data .= fgets($fh, 256);
}
fwrite($file, base64_decode($data));
}
if ($file) {
fclose($file);
}
if ($fh) {
fclose($fh);
}
echo 'OK';
copy($tmpFile, PASTA_UPLOAD . '/' . $_GET['filename']);
} else {
echo 'Requisição inválida';
}
Para salvar no Desktop, o navegador do usuário terá que ter suporte para o atributo download
na tag <a>
(todos navegadores modernos Desktop possuem), exemplo:
function canvasDownload(canvas, filename, formato) {
var a = document.createElement("a");
a.href = canvas.toDataURL("image/" + (formato ? formato : "jpeg") );
a.download = filename;
a.click();
}
Note que é necessário adicionar o evento downloadHtml2canvas
em uma ação do usário, como click
, mouseover
, etc, pois se não o script é bloqueado. Exemplo de uso:
<button id="gerar">Gerar</button>
<button id="salvar" disabled>Salvar</button>
<script>
(function() {
var gerar = document.getElementById("gerar"),
salvar = document.getElementById("salvar"),
currentCanvas = null;
gerar.onclick = function() {
salvar.disabled = true;
html2canvas(document.getElementById("id-do-meu-elemento"), {
"logging": true //Habilita os logs
}).then(function(canvas) {
currentCanvas = canvas;
salvar.disabled = false;
});
};
salvar.onclick = function() {
if (currentCanvas !== null && salvar.disabled === false) {
canvasDownload(currentCanvas, "foto.jpg");
}
};
})();
</script>
Nota: se quiser salvar em outro formato basta ajustar assim:
canvasDownload(currentCanvas, "foto.png", "png")
canvasDownload(currentCanvas, "foto.gif", "gif")
print
da página apos CSS/JS
serem aplicados e executados?
window.onload
para pode liberar o html2canvas
. @RicardoHenrique Nota: Leia a parte da resposta que está escrito Conclusão sobre tirar foto da página.
Você pode utilizar a biblioteca html2canvas que se adequa exatamente ao que você quer, pois ela "tira print" de qualquer divisão de uma página html.
Aqui você encontra os exemplos de utilização, mas deixarei um trecho de código abaixo para exemplificar:
$("#PrintTrigger").on("click", function (e) {
e.preventDefault();
html2canvas($("#Print"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
});
#Print {
width: 300px;
height: 300px;
background: #00FF00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<div id="Print">
<h1>Vai printar esta div e repetí-la abaixo:</h1>
</div>
<button id="PrintTrigger">Tirar Print</button>
O código JS é bem simples:
html2canvas(elemento, {
onrendered: function(canvas) {
// Ação à realizar, ao renderizar a imagem (print)
}
});
elemento - Corresponde à divisão da página html à qual você quer "printar" (Podendo sem um Elemento DOM, um ID ou uma Classe)
onrendered - Função que será executada assim que o "print" for renderizado. Nesta função você pode utilizar AJAX para enviar ao servidor sem recarregar a página, enfim, as possibilidades são inúmeras.
Eu já faço uso do Headless Browser PhantomJS para download de páginas WEB Completas renderizadas de forma FIEL a exibida no browser comum (ele interpreta o JS e CSS) mas com ele tambem é possivel realizar um print screen da página desejada da sequinte forma:
Comando que acessa uma determinada página e salva o conteúdo da mesma em um .png (mas pode salvar como PDF):
var page = require('webpage').create();
page.open('http://stackoverflow.com/', function() {
page.render('stackoverflow.png');
phantom.exit();
});
chame-o da seguinte foma na linha de comandos: nome do programa (caso ele tenha sido inserido no path) mais npath do arquivo javascript criado no item acima ficando da seguinte forma:
phantomjs teste.js
Com ele tambem é possivel estabelecer as dimensões da janela onde o site é exibido (isto é util caso queira ver como está sendo renderizado um site responsivo) da seguinte forma (esta configuração deve ser feita antes do page.open()):
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = {
width: 480,
height: 800
};
Você pode chama-lo usando o comando shell_exec desta forma:
$pathToPhantomJS = 'C:\phantomjs-2.0.0-windows\bin\phantomjs';
$pathToJSScript = 'GetPage.js';
$comand = $pathToPhantomJS . ' ' . $pathToJSScript . ' ' . $site;
shell_exec($comand);
Obs: passo uma terceira variavel que representa o site a ter sua pagina printada o site é pego pelo vetor de args que são passados para o shell.
É possivel criar um CRON JOB para executar o comando phantomjs teste.js
em determinado horário.
O PhantomJS me foi muito util e é muito configuravel e não conseguiria descrever todas a possibilidades aqui então estou colando alguns links Oficial e não Oficias que poderão ser uteis:
Obs: Um ponto relevante levantado pelo usuário @GuilhermeNascimento é que esta solução só funciona do lado
Servidor
ou em seuDesktop
.
Download
Link: http://phantomjs.org/download.html
Documentação
Screen Capture: Link
viewportSize: Link
shell_exec (PHP): Link
Com PHP creio que não dá para ser feito, mas com Javascript e canvas
(HTML5) sim.
Com o advento do HTML5, novas tags foram implementadas, um deles é o canvas
, que possibilita realizar essa tarefa.
Com o elemento canvas
você pode criar gráficos, composições de fotos, animações, imagens 2D, 3D e existem várias APIs que te fornecem inúmeros recursos, como a html2canvas, e é esta API que vamos trabalhar.
Primeiramente vamos entrar no site e baixar o arquivo. Imagino que você já tenha baixado o arquivo jquery.js
.
O html2canvas tem um método inicial chamado Preload
, que recebe dois parâmetros.
O script executa o seguinte comportamento:
Vamos ao código:
<script>
$(window).ready(function () {
html2canvas.Preload(document.body, {
complete: function (images) {
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue, { elements: { length: 1} });
var img = canvas.toDataURL();
openConsole("<img src='" + img + "'><p>");
}
});
function openConsole(content) {
top.console = window.open('', 'myconsole',
'width=350,height=250'
+ ',menubar=0'
+ ',toolbar=1'
+ ',status=0'
+ ',scrollbars=1'
+ ',resizable=1')
top.console.document.writeln(
'<html><head><title>Console</title></head>'
+ '<body bgcolor=white onLoad="self.focus()">'
+ content
+ '</body></html>'
)
top.console.document.close()
};
});
</script>
Lembrando que os browsers que aceitam canvas
são Chrome, FF, Opera e IE7+
Para mais informações, dê uma olhada neste artigo:
http://imasters.com.br/artigo/24443/javascript/screenshot-com-canvas-e-javascript/