Зробіть скріншот веб-сторінки з JavaScript?

Чи можна зробити скріншот веб-сторінки з JavaScript та повернути її назад на сервер?

Я не так переймаюся питаннями безпеки браузера. і т.д., як реалізація буде для HTA . Але чи можливо це?

Я зробив це для HTA, використовуючи елемент керування ActiveX. Зробити скріншот було досить просто побудувати керування в VB6. Мені довелося використовувати виклик API keybd_event API, оскільки 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");

Потім у вас є скріншот на стороні сервера.

Це може бути не ідеальним рішенням для вас, але все-таки варто згадати.

Snapsie - об’єкт ActiveX з відкритим кодом, що дозволяє знімати і зберігати знімки екрана Internet Explorer. Після того, як файл DLL зареєстрований на клієнті, ви зможете зробити знімок екрана та завантажити файл на сервер за допомогою JavaScript. Недоліки: йому потрібно зареєструвати файл DLL у клієнта і працює лише з Internet Explorer.

Ми мали аналогічну вимогу щодо повідомлення про помилки. Оскільки це було для інтранетного сценарію, ми змогли використовувати доповнення до браузера (як Fireshot for Firefox та IE Скріншот для Internet Explorer).

SnapEngage використовує аплет Java (1.5 +) , щоб зробити скріншот браузера. AFAIK, java.awt.Robotповинен зробити цю роботу - користувач повинен просто дозволити аплету зробити це (один раз).

І я щойно знайшов повідомлення про це:

• Стек питання щодо переповнення JavaScript-коду, щоб зробити знімок екрана веб-сайту без використання ActiveX
• Повідомлення в блозі Як працює SnapABug - і що їм робити

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

Що стосується автоматичного - це повністю залежить від інструменту, який ви використовуєте. Якщо у нього є API, я впевнений, що ви можете запустити скріншот і зберегти процес через пару дзвінків Visual Basic, не знаючи, що користувач знає, що ви зробили.

Оскільки ви згадали про HTA, я припускаю, що ви перебуваєте в Windows і (ймовірно) добре знаєте своє оточення (наприклад, ОС та версію).

Я виявив, що dom-to-image зробив хорошу роботу (набагато краще, ніж html2canvas). Дивіться таке запитання та відповідь: https://stackoverflow.com/a/32776834/207981

Це запитання задає питання про те, щоб повернути це на сервер, що має бути можливим, але якщо ви хочете завантажити зображення (зображення), ви хочете поєднати його з FileSaver.js , і якщо ви хочете завантажити поштовий файл з декілька файлів зображень, усі створені на стороні клієнта, дивіться на 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>

Це все. Потім просто зачекайте короткий час, і зображення автоматично з’явиться внизу сторінки, не потребуючи перезавантаження сторінки.

Існують і інші функції механізму скріншотів, які ви можете вивчити тут .

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

Якщо ви готові це зробити на стороні сервера, є такі варіанти, як PhantomJS , який тепер застарілий. Кращий спосіб піти б Безголовий 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 зірок | Латунні труби: успішно | Завантаження 1.3M / місяць |

цитата: " JavaScript HTML-рендерір" Сценарій дозволяє робити "скріншоти" веб-сторінок або їх частин безпосередньо на веб-переглядачі користувачів . не робить фактичного скріншот, але будує скріншот на основі інформації, наявної на сторінці.

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

Перевір :

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