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

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

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

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

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

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

Pounder, если это возможно сделать, поместив все элементы тела в холст, а затем с помощью 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");

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

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

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

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

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

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

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

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

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

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

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

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

Отличное решение для снятия скриншотов в 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. Для получения дополнительной информации проверьте подробное руководство здесь .

Если вы готовы сделать это на стороне сервера, есть такие опции, как PhantomJS , который сейчас не рекомендуется. Лучше всего было бы использовать Headless Chrome с чем-то вроде Puppeteer на 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();
})();

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

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

• Restpack
• UrlBox
• Снимок экрана

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

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

https://github.com/ondras/browsershot

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

GitHub 20K звезды | Лазурные трубы: Успешно | Загрузки 1.3M / мес. |

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

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

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

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