Faça uma captura de tela de uma página da web com JavaScript?

Question

É possível fazer uma captura de tela de uma página da Web com JavaScript e enviá-la de volta ao servidor?

Não estou tão preocupado com questões de segurança do navegador.etc.como a implementação seria para ATS.Mas é possível?

Answer 1

Fiz isso para um HTA usando um controle ActiveX.Foi muito fácil construir o controle em VB6 para fazer a captura de tela.Tive que usar a chamada da API keybd_event porque SendKeys não pode fazer PrintScreen.Aqui está o código para isso:

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Public Const CaptWindow = 2

Public Sub ScreenGrab()
   keybd_event &H12, 0, 0, 0
   keybd_event &H2C, CaptWindow, 0, 0
   keybd_event &H2C, CaptWindow, &H2, 0
   keybd_event &H12, 0, &H2, 0
End Sub

Isso só leva você até a janela para a área de transferência.

Outra opção, se a janela da qual você deseja uma captura de tela for um HTA, seria apenas usar um XMLHTTPRequest para enviar os nós DOM para o servidor e, em seguida, criar as capturas de tela no lado do servidor.

Answer 2

O Google está fazendo isso no Google+ e um desenvolvedor talentoso fez engenharia reversa e produziu http://html2canvas.hertzen.com/ .Para trabalhar no IE você precisará de uma biblioteca de suporte ao canvas, como http://excanvas.sourceforge.net/

Answer 3

Outra solução possível que descobri é http://www.phantomjs.org/ o que permite fazer capturas de tela de páginas com muita facilidade e muito mais.Embora meus requisitos originais para esta questão não sejam mais válidos (trabalho diferente), provavelmente integrarei o PhantomJS em projetos futuros.

Answer 4

Pounder's se isso é possível definindo todos os elementos do corpo em uma tela e usando canvas2image ?

http://www.nihilogic.dk/labs/canvas2image/

Answer 5

Uma possível maneira de fazer isso, se estiver executando no Windows e tiver o .NET instalado, você pode fazer:

public Bitmap GenerateScreenshot(string url)
{
    // This method gets a screenshot of the webpage
    // rendered at its full size (height and width)
    return GenerateScreenshot(url, -1, -1);
}

public Bitmap GenerateScreenshot(string url, int width, int height)
{
    // Load the webpage into a WebBrowser control
    WebBrowser wb = new WebBrowser();
    wb.ScrollBarsEnabled = false;
    wb.ScriptErrorsSuppressed = true;
    wb.Navigate(url);
    while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }


    // Set the size of the WebBrowser control
    wb.Width = width;
    wb.Height = height;

    if (width == -1)
    {
        // Take Screenshot of the web pages full width
        wb.Width = wb.Document.Body.ScrollRectangle.Width;
    }

    if (height == -1)
    {
        // Take Screenshot of the web pages full height
        wb.Height = wb.Document.Body.ScrollRectangle.Height;
    }

    // Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
    Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
    wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
    wb.Dispose();

    return bitmap;
}

E então via PHP você pode fazer:

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

Então você tem a captura de tela no lado do servidor.

Answer 6

Esta pode não ser a solução ideal para você, mas ainda assim vale a pena mencionar.

Snapsie é um código aberto, ActiveX objeto que permite que capturas de tela do Internet Explorer sejam capturadas e salvas. Depois que o arquivo DLL for registrado no cliente, você poderá capturar a captura de tela e enviar o arquivo para o servidor usando JavaScript.Desvantagens:ele precisa registrar o arquivo DLL no cliente e funciona apenas com o Internet Explorer.

Answer 7

Tínhamos um requisito semelhante para relatar bugs.Como se tratava de um cenário de intranet, pudemos usar complementos de navegador (como Tiro de fogo para Firefox e Captura de tela do IE para Internet Explorer).

Answer 8

O SnapEngage usa um Miniaplicativo Java (1.5+) para fazer uma captura de tela do navegador.ATÉ ONDE SEI, java.awt.Robot deve fazer o trabalho - o usuário só precisa permitir que o miniaplicativo faça isso (uma vez).

E acabei de encontrar um post sobre isso:

• Pergunta sobre estouro de pilha Código JavaScript para fazer uma captura de tela de um site sem usar ActiveX
• Postagem no blog Como funciona o SnapABug – e o que eles devem fazer

Answer 9

Você pode conseguir isso usando HTA e VBScript.Basta chamar uma ferramenta externa para fazer a captura de tela.Esqueci qual é o nome, mas no Windows Vista existe uma ferramenta para fazer capturas de tela.Você nem precisa de uma instalação extra para isso.

Quanto ao automático - depende totalmente da ferramenta que você usa.Se tiver uma API, tenho certeza de que você pode acionar a captura de tela e o processo de salvamento por meio de algumas chamadas do Visual Basic sem que o usuário saiba que você fez o que fez.

Como você mencionou o HTA, presumo que você esteja no Windows e (provavelmente) conheça seu ambiente (por exemplo,SO e versão) muito bem.

Answer 10

Uma ótima solução para captura de tela em Javascript é aquela de https://grabz.it.

Eles têm uma API de captura de tela flexível e simples de usar que pode ser usada por qualquer tipo de aplicativo JS.

Se você quiser experimentar, primeiro você deve obter a autorização chave do aplicativo + segredo e a SDK grátis

Então, no seu aplicativo, as etapas de implementação seriam:

// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>

//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>

A captura de tela pode ser personalizada com diferentes parâmetros.Por exemplo:

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

Isso é tudo.Em seguida, basta aguardar um pouco e a imagem aparecerá automaticamente na parte inferior da página, sem a necessidade de recarregar a página.

Existem outras funcionalidades no mecanismo de captura de tela que você pode explorar aqui.

Também é possível salvar a captura de tela localmente.Para isso, você precisará utilizar a API do lado do servidor GrabzIt.Para mais informações consulte o guia detalhado aqui.

Answer 11

eu achei aquilo dom-para-imagem fez um bom trabalho (muito melhor que o html2canvas).Veja a seguinte pergunta e resposta: https://stackoverflow.com/a/32776834/207981

Esta pergunta pergunta sobre o envio de volta ao servidor, o que deve ser possível, mas se você deseja baixar a(s) imagem(s), você vai querer combiná-la com ArquivoSaver.js, e se você quiser baixar um zip com vários arquivos de imagem, todos gerados no lado do cliente, dê uma olhada em jszip.

Answer 12

Se você estiver disposto a fazer isso no lado do servidor, existem opções como Fantasma JS, que agora está obsoleto.A melhor maneira de fazer isso seria Headless Chrome com algo como Marionetista no Node.JS.Capturar uma página da web usando o Puppeteer seria tão simples quanto segue:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

No entanto, requer que o headless chrome possa ser executado em seus servidores, o que tem algumas dependências e pode não ser adequado em ambientes restritos.(Além disso, se você não estiver usando o Node.JS, talvez seja necessário cuidar da instalação/inicialização dos navegadores por conta própria.)

Se você estiver disposto a usar um serviço SaaS, há muitas opções, como

• Restpack
• UrlBox
• Camada de captura de tela