7

Seria possível fazer isso?

Por exemplo:

Eu indico uma página para minha aplicação, e ela guarda uma imagem da página indicada. Uma print.

2 Respostas 2

6

Você pode utilizar a biblioteca html2canvas para salvar uma imagem. Preparei a seguinte demonstração para você:

HTML:

<div id="welcome">
    <h1>Hello world!</h1>
</div>

<hr>

<div id="screenshot"></div>

JavaScript:

var content = document.getElementById('welcome')
    , screenshot = document.getElementById('screenshot');

html2canvas(content, {
    onrendered: function(canvas) {
        screenshot.appendChild(canvas);
    }
});

jsFiddle para visualizar.

A técnica é bem simples: #welcome é o elemento que você deseja capturar uma screenshot; #screenshot é onde a mesma será exibida.

Para realizar o efeito que desejas, você deverá trabalhar em cumplicidade com o Rails. Você disse o seguinte:

Eu indico uma página para minha aplicação, e ela guarda uma imagem da página indicada. Uma print.

Então, pela minha interpretação, você quer tirar a foto de uma página inteira. Para isso, você precisará consumir o corpo da tal página (elemento body) e utilizá-lo como referência no html2canvas (no caso, a variável content (no JavaScript) é a responsável por isso). Veja só:

uri = URI.parse("http://yourapp.com")

http = Net::HTTP.new(uri.host, uri.port)

request = Net::HTTP::Post.new(uri.request_uri)

response = http.request(request)

render json: response.body

O código acima, baseado neste aqui, irá consumir todo o body da página solicitada. Depois, utilizando render json: response.body, você estará enviando, via JSON, este corpo para quem solicitar.

Em resumo, com um cenário:

  1. Crie um input para você digitar de qual site você quer capturar a tela e um button para enviar a solicitação para o servidor (Rails);
  2. Quando você ou algum usuário clicar no button, envie o valor do input para o servidor — de maneira assíncrona, com AJAX — e utilize ele para trabalhar com o URI.parse;
  3. Então, o elemento body, que é o que você precisa para tirar foto da página, estará armazenado no fragmento response.body que está sendo devolvido para o cliente através do render json;
  4. Por fim, na sucessão da sua requisição (do tipo GET, via AJAX), você chama a função em que o html2canvas está escopado e utilize a resposta da requisição para popular a variável content;

A linha que você deve seguir é mais ou menos essa. Existem algumas adaptações que você pode fazer ao longo do caminho, mas a ideia foi dada.

1
  • 1
    Exatamente isso que eu buscava, estou iniciando e ainda não conheço estas bibliotecas, muito obrigado! 29/07/2014 às 12:59
2

A reposta para sua pergunta é muito complexa para ser detalhada, você precisa usar um serviço para gerenciamento de tarefas como o SideKiq e integrá-lo com a gem PhantomJS GEM, lembrando que para isso você precisará ter instalado o PhantomJS. O PhantomJS irá permitir que você capture essas telas e para maiores informações, consulte: Screen Capture Doc

Então através da GEM você poderá interagir usando:

require 'phantomjs'
Phantomjs.run('./path/to/script.js') # => retorna stdout

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 .