Снимок экрана с использованием JavaScript для расширений Chrome

Question

Я много раз искал снимки с использованием JS, но ни один из них не показался мне полезным. Некоторые говорят, что используют элементы управления ActiveX, что не подходит для моей ситуации. Я надеялся сделать снимок с помощью JS и загрузить его на сервер.

Answer 1

Поскольку вы используете это в расширениях Chrome, API вкладок имеет метод с именем captureVisibleTab , который позволяет захватывать видимую область выбранной в данный момент вкладки в указанном окне.

Чтобы использовать это, вы просто добавляете "вкладки" к своему разрешению манифесту. А со своей фоновой страницы или всплывающего окна (или любой другой страницы расширения) вы просто вызываете этот метод следующим образом:

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});

Вы можете управлять свойством, добавив {quality: 50} и изменив формат, тоже все описано в документах, упомянутых выше.

Прелесть HTML5 в том, что вы можете изменять это изображение с помощью HTML5 Canvas, вы можете очень легко манипулировать, преобразовывать, изменять, вырезать все, что вы хотите!

Надеюсь, это то, что вы ищете! С Новым Годом!

Answer 2

Я не уверен, было ли это доступно, когда был дан первоначальный ответ, но у Google теперь есть пример, показывающий, как делать скриншоты:

http://developer.chrome.com/extensions/samples.html

Выполните поиск "Test Screenshot Extension" на этой странице.

Answer 3

Если вы ищете рабочий пример, я создал репо с расширением, которое делает скриншот всей веб-страницы. Посмотрите здесь: https://github.com/marcinwieprzkowicz/take-screenshot

Answer 4

Если вы находитесь внутри предприятия, ваш ИТ-специалист может установить для политики DisableScreenshots значение true. Вы можете проверить это, зайдя в chrome: // policy и найдя этот ключ.