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

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

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

Паундер, если это можно сделать, установив все элементы тела в canvase затем с помощью 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 скриншот для Internet Explorer).

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

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

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

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

Что касается as automatic-это полностью зависит от используемого вами инструмента. Если у него есть 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>

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

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

также можно сохранить снимок экрана локально. Для этого вам нужно будет использовать GRABZIT server side API. Для подробнее проверьте подробное руководство здесь.

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

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