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

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

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

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

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

Я сделал это для 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 на сервер, а затем создать снимки экрана на стороне сервера.

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

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

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

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

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

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

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

Возможный способ сделать это, если вы работаете в 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");

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

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

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

Отличное решение для создания снимков экрана в 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>

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

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

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

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

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

Если вы хотите сделать это на стороне сервера, есть такие параметры, как PhantomJS, которые теперь устарели. Лучшим вариантом будет Headless Chrome с чем-то вроде Кукловод на Node.JS. Захват веб-страницы с помощью Puppeteer будет очень простым:

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

Однако для работы на ваших серверах требуется безголовый хром, который имеет некоторые зависимости и может не подходить в ограниченных средах. (Кроме того, если вы не используете Node.JS, вам может потребоваться самостоятельно выполнить установку / запуск браузеров.)

Если вы хотите использовать услугу SaaS, есть много вариантов, например

• Рестак
• UrlBox
• Слой снимка экрана

Это старый вопрос, но, возможно, есть еще кто-то, кто заинтересован в современном ответе:

Вы можете использовать getDisplayMedia:

https://github.com/ondras/browsershot

На сегодняшний день, апрель 2020 г., библиотека GitHub html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K звезд | Azure pipeles: выполнено успешно | Загрузок 1,3 млн / мес |

цитата: "Средство визуализации JavaScript HTML Скрипт позволяет вам делать «скриншоты» веб-страниц или их частей прямо в браузере пользователя.. Снимок экрана основан на модели DOM и, как таковой, может не быть на 100% точным для реального представления, поскольку он не создает фактический снимок экрана, а строит снимок экрана на основе информации, доступной на странице.

Я сделал простую функцию, которая использует rasterizeHTML для создания svg и / или изображения с содержимым страницы.

Проверить это:

https://github.com/orisha/tdg-screen-shooter-pure-js