Сделайте скриншот веб-страницы с JavaScript?

Можно ли сделать снимок экрана с веб-страницы с помощью JavaScript, а затем отправить его обратно на сервер?

Я не так обеспокоен проблемами безопасности браузера. и т.д., поскольку реализация будет для HTA. Но возможно ли это?

Ответ 1

Я сделал это для HTA с помощью элемента управления ActiveX. Было довольно легко построить элемент управления в VB6, чтобы сделать снимок экрана. Мне пришлось использовать вызов keybd_event API, потому что SendKeys не может делать PrintScreen. Вот код для этого:

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

Это приведет только к тому, чтобы получить окно в буфер обмена.

Другой вариант, если в окне, которое вы хотите сделать снимок экрана, является HTA, нужно просто использовать XMLHTTPRequest для отправки узлов DOM на сервер, а затем создать скриншоты на стороне сервера.

Ответ 2

Google делает это в Google+, а талантливый разработчик обратил его в конструкцию и выпустил http://html2canvas.hertzen.com/. Для работы в IE вам понадобится библиотека поддержки холста, такая как http://excanvas.sourceforge.net/

Ответ 3

Другим возможным решением, которое я обнаружил, является http://www.phantomjs.org/, что позволяет очень легко делать скриншоты страниц и многое другое. Хотя мои первоначальные требования к этому вопросу уже недействительны (другая работа), я, скорее всего, буду интегрировать PhantomJS в будущие проекты.

Ответ 4

Pounder, если это можно сделать, установив все элементы тела в холст, а затем используя canvas2image?

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

Ответ 5

Возможный способ сделать это, если вы работаете в Windows и устанавливаете .NET:

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 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;
}

А затем через PHP вы можете сделать:

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

Затем у вас есть скриншот на стороне сервера.

Ответ 6

Это может быть не идеальное решение для вас, но это все равно стоит упомянуть.

Snapsie является открытым исходным кодом, ActiveX, который позволяет захватывать и сохранять снимки Internet Explorer. Как только DLL файл зарегистрирован на клиенте, вы сможете захватить скриншот и загрузить файл на сервер с JavaScript. Недостатки: ему необходимо зарегистрировать DLL файл на клиенте и работать только с Internet Explorer.

Ответ 7

У нас было аналогичное требование для сообщений об ошибках. Поскольку это было для сценария интрасети, мы смогли использовать браузерные аддоны (например, Fireshot для Firefox и Скриншот IE для Internet Explorer).

Ответ 8

SnapEngage использует Java-апплет (1.5+), чтобы сделать снимок экрана браузера. AFAIK, java.awt.Robot должен выполнить задание - пользователь должен просто разрешить апплету делать это (один раз).

И я только что нашел сообщение об этом:

Вопрос о переполнении стека Код JavaScript для снятия скриншота с сайта без использования ActiveX
Сообщение в блоге Как работает SnapABug - и что они должны делать

Ответ 9

Вы можете добиться этого с помощью HTA и VBScript. Просто вызовите внешний инструмент, чтобы сделать скриншоты. Я забыл, что это за имя, но на Windows Vista есть инструмент для создания скриншотов. Вам даже не нужна дополнительная установка.

Как автоматическое - это полностью зависит от используемого вами инструмента. Если у него есть API, я уверен, что вы можете запустить скриншот и сохранить процесс через пару вызовов Visual Basic, не зная, что вы сделали то, что сделали.

Поскольку вы упомянули HTA, я предполагаю, что вы находитесь в Windows и (возможно) хорошо знаете свою среду (например, ОС и версию).

Ответ 10

Отличное решение для снятия скриншотов в Javascript - это https://grabz.it.

У них есть гибкий и простой в использовании скриншот API, который может использоваться любым типом приложения JS.

Если вы хотите попробовать, сначала вы должны получить авторизацию ключ приложения + секрет и бесплатный SDK

Затем в вашем приложении шаги реализации:

// 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>

Снимок экрана можно настроить с помощью parameters. Например:

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

Это все. Затем просто подождите немного, и изображение будет автоматически отображаться внизу страницы, без необходимости перезагрузки страницы.

Существуют другие функции механизма скриншотов, которые вы можете изучить здесь.

Также можно сохранить снимок экрана локально. Для этого вам нужно будет использовать API-интерфейс сервера GrabzIt. Подробнее см. Подробное руководство здесь.

Ответ 11

Я обнаружил, что dom-to-image сделал хорошую работу (намного лучше, чем html2canvas). См. Следующий вопрос и ответ: fooobar.com/info/86327/...

Этот вопрос задает вопрос о возврате этого сервера на сервер, что должно быть возможно, но если вы хотите загрузить изображения, вы захотите объединить их с FileSaver.js, и если вы хотите загрузить zip с несколькими файлами изображений, все созданные на стороне клиента взгляните на jszip.