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

Question

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

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

Answer 1

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

Answer 2

Я сделал это для HTA ​​с помощью элемента управления ActiveX. Было довольно легко встроить элемент управления в VB6, чтобы сделать снимок экрана. Мне пришлось использовать вызов API keybd_event, потому что 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 на сервер, а затем создать снимки экрана на стороне сервера.

Answer 3

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

Answer 4

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

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

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

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

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

Тогда у вас есть скриншот на стороне сервера.

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

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

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

Скриншот можно настроить с другими параметрами . Например:

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

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

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

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