14

Gostaria de saber como tirar print de uma página, e salvar em imagem.

Segue exemplo para entendimento:

inserir a descrição da imagem aqui

5
  • Havia me esquecido de adicionar a parte de salvar, acredito que tua necessidade seja salvar no servidor. Se não me avise.
    – Syzoth
    Commented 15/05/2015 às 19:01
  • @GuilhermeNascimento se puder colocar também essa parte, ficarei agradecido ;) Commented 15/05/2015 às 19:03
  • Salvar no servidor? Ou salvar no desktop?
    – Syzoth
    Commented 15/05/2015 às 19:03
  • @GuilhermeNascimento pode deixar, vi que você colocou como salvar canvas no servidor. Commented 15/05/2015 às 19:06
  • Beleza, obrigado! Commented 15/05/2015 às 19:06

4 Respostas 4

13

Desenhando DOM com SVG dentro do Canvas

É 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>';

Usando o html2canvas

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.

Proxy para html2canvas

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

Conclusão sobre tirar foto da página

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".


Salvando canvas no servidor

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 exemplo image/gif ou image/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';
}

Salvando na maquina do usuário Desktop

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")
5
  • Guilherme Nascimento poderia me falar se sua solução faz o print da página apos CSS/JS serem aplicados e executados?
    – Ricardo
    Commented 15/05/2015 às 19:36
  • 1
    Depende do momento da execução, se você aplicar o CSS por JavaScript e depois executar o html2canvas, sim irá funcionar. Porém se você está falando de elementos estáticos é necessário o 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.
    – Syzoth
    Commented 15/05/2015 às 19:42
  • GuilhermeNasicimento eu li esta parte, você entendeu mal minha pergunnta não quis dizer o CSS aplicado por javascript, eu quis dizer o css aplicado aos elementos html e a execução dos scripts javascripts (para renderizar imagens que estão em base64 e/ou fazer requisições AJAX para busca-las)
    – Ricardo
    Commented 15/05/2015 às 19:49
  • 1
    Se eu entendi, sim @RicardoHenrique o html2canvas tenta renderizar no estado atual, independente se o DOM foi manipulado manualmente ou por javascript.
    – Syzoth
    Commented 15/05/2015 às 19:56
  • GuilhermeNascimento Ok entendi.
    – Ricardo
    Commented 15/05/2015 às 19:57
5

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>

Funcionamento

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.

3

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:

  • Crie um arquivo com extensão .js
  • Cole e salve o seguinte conteúdo:

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 seu Desktop.

Download

Link: http://phantomjs.org/download.html

Documentação

Screen Capture: Link

viewportSize: Link

shell_exec (PHP): Link

6
  • Acabei de ler sobre o assunto, único problema é que está lib usa a engine WebKit portanto não irá renderizar da mesma maneira que é visualizado a página pelo usuário, mas para criar um sistema de portfólios, galerias, etc. realmente é uma incrível solução. Uma nota legal é deixar algo como "isto só funciona no lado do servidor"
    – Syzoth
    Commented 16/05/2015 às 16:43
  • @GuilhermeNascimento olha já realizei vários prints e sempre vieram de forma semelhante a exibida no chrome/firefox é provável (e já aconteceu comigo) é que alguns sites identificam que ele não possui certos complementos como o flash player e não retornam o conteúdo que deveria ser retornado.
    – Ricardo
    Commented 16/05/2015 às 16:48
  • @GuilhermeNascimento alguns servidores identificam que não se trata de um navegador como firefox /ie/chrome e não enviam o HTML completo (somente o head), enviam um código javascript anti-robot ou deixa em loop infinito.
    – Ricardo
    Commented 16/05/2015 às 17:14
  • 1
    @GuilhermeNascimento Use, gosto bastante e tem MUITAS outras funcionalidades se não fosse os empecilhos destacados no comentário acima seria quase perfeito. para o objetivo de printar a uma outra pergunta onde tambem dei esta mesma resposta: pt.stackoverflow.com/questions/714/…
    – Ricardo
    Commented 16/05/2015 às 17:48
  • 1
    +1 lá também, obrigado
    – Syzoth
    Commented 16/05/2015 às 18:45
2

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.

  • Element: É o elemento que você deseja estar renderizando, por default é document.body
  • Options: São as opções de renderização.
  • Complete: função callback que será chamada depois do Preloading
  • Logging: Loga os eventos no console
  • Proxy: Url da página que vai ser usada como proxy
  • Timeout: Tempo para carregamento das imagens

O script executa o seguinte comportamento:

  1. Executar o Preload da página
  2. Executar o Parse dos Elementos
  3. Executar o Render do Objeto

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/

3
  • Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. Commented 15/05/2015 às 17:55
  • 1
    @williamhk2 valeu a dica, coloquei o código na minha resposta. Commented 15/05/2015 às 17:58
  • 3
    A versão fornecida no exemplo já está em desuso faz tempo, eu acompanho e colaboro eventualmente com o projeto html2canvas, a versão atual é a 0.5.0-rc. No link fala que tem suporte para IE7, mas isto era quando havia o "html2canvas-flash-fallback", esta parte do projeto foi descontinuada. Links no SOpt: pt.stackoverflow.com/a/57155/3635 e pt.stackoverflow.com/a/55522/3635
    – Syzoth
    Commented 15/05/2015 às 18:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .