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

Google делает это в Google+ и талантливый разработчик обратного проектирования и производства http://html2canvas.hertzen.com/ . Для работы в IE вам понадобится библиотека поддержки canvas, такая как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 для 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>

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

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

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

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

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