Tire uma captura de canvas de uma página da Web com JavaScript?

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

Eu não estou tão preocupado com problemas de segurança do navegador. etc. como a implementação seria para HTA . Mas isso é possível?

Eu fiz isso para um HTA usando um controle ActiveX. Foi muito fácil construir o controle no VB6 para fazer a captura de canvas. Eu tive que usar a chamada de 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ó faz com que você alcance a janela para a área de transferência.

Outra opção, se a janela que você quer uma captura de canvas é um HTA seria apenas usar um XMLHTTPRequest para enviar os nós DOM para o servidor, então crie as screenshots do lado do servidor.

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 a canvass, como http://excanvas.sourceforge.net/

Outra solução possível que descobri é a http://www.phantomjs.org/, que permite tirar facilmente screenshots de páginas e muito mais. Embora meus requisitos originais para essa pergunta não sejam mais válidos (trabalho diferente), provavelmente integrarei o PhantomJS em projetos futuros.

Pounder, se isso for possível, definindo todos os elementos do corpo em uma checkbox de plástico usando o canvas2image?

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

Uma maneira possível 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 canvas no lado do servidor.

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

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

Nós tivemos um requisito semelhante para relatar bugs. Como era para um cenário de intranet, pudemos usar os complementos do navegador (como o Fireshot for Firefox e o IE Screenshot para o Internet Explorer).

O SnapEngage usa um applet Java (1.5+) para fazer uma captura de canvas do navegador. AFAIK, java.awt.Robot deve fazer o trabalho – o usuário tem apenas para permitir que o applet faça isso (uma vez).

E acabei de encontrar um post sobre isso:

  • Pergunta de estouro de pilha código JavaScript para tirar uma captura de canvas de um site sem usar o ActiveX
  • Post do blog Como o SnapABug funciona – e o que eles devem fazer

Você pode conseguir isso usando HTA e VBScript . Basta ligar para uma ferramenta externa para fazer o screenshot. Esqueci qual é o nome, mas no Windows Vista há uma ferramenta para fazer capturas de canvas. Você nem precisa de uma instalação extra para isso.

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

Desde que você mencionou o HTA, estou assumindo que você está no Windows e (provavelmente) conhece muito bem seu ambiente (por exemplo, SO e versão).

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

Eles têm uma API de captura de canvas 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 chave do aplicativo de autorização + secret e o SDK gratuito

Em seguida, 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  //use the key and the secret to login, capture the url  

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

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

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

Existem outras funcionalidades para o mecanismo de captura de canvas que você pode explorar aqui .

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

Descobri que o dom-to-image fez um bom trabalho (muito melhor que o html2canvas). Veja a pergunta e resposta a seguir: https://stackoverflow.com/a/32776834/207981

Esta pergunta é sobre como enviar isso de volta para o servidor, o que deve ser possível, mas se você quiser baixar a (s) imagem (ns) você irá querer combiná-la com FileSaver.js , e se você quiser baixar um zip com vários arquivos de imagem todos gerados no lado do cliente dão uma olhada no jszip .