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

https://stackoverflow.com/questions/60455

09-06-2019
|

Вопрос

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

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

Решение

Я сделал это для 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 в будущие проекты.

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

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

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

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

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

А SnapEngage использует Java-апплет (1.5+), чтобы сделать скриншот браузера.НАСКОЛЬКО МНЕ ИЗВЕСТНО, java.awt.Robot должен выполнить эту работу - пользователю нужно просто разрешить апплету сделать это (один раз).

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

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

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow