Частичный скриншот с хромом

Question

Я пытаюсь создать мое первое расширение Chrome и хочу, чтобы он делал скриншоты. Я знаю, что у Chrome есть интерфейс captureVisibleTab для получения видимой области экрана. Я получил это, чтобы работать. Но я хочу, чтобы иметь возможность снимать частичные скриншоты (например, клики пользователей и перетаскивать мышью на экране, чтобы выбрать определенную прямоугольную область содержимого). Как это будет работать в Chrome? Я не вижу API для этого, но я знаю Awesome Screenshot и некоторые другие расширения экрана.

Я использую .mouseup и .mousedown для обнаружения щелчков мышью и event.pageX и event.pageY для получения координат на странице. Но как я могу получить прямоугольник для отображения на странице? Мне нужно преобразовать веб-страницу в холст, но я не совсем уверен, как это сделать. Кроме того, как только я получу выбранную область, как мне ее преобразовать в образ и получить dataURI, как возвращаемое значение, которое дает хром API?

Должен ли я делать это другим способом? Спасибо за вашу помощь!

Answer 1

Я бы предложил сначала создать общий снимок экрана (example для других), а затем обрезать его позже, основываясь на данных пользователя, которые вы собрали. Вы можете обрезать изображение с помощью JavaScript и элемента HTML5 <canvas>. (example code)

Что касается преобразования веб-страницы в элемент <canvas>, сделайте начальный снимок экрана, показывая его на холсте с помощью функции drawImage().

Затем вы можете использовать либо метод, показанный в «example code», либо библиотеку, такую ​​как cropper, чтобы нарисовать прямоугольник на экране для пользовательского интерфейса.

example code также может показать вам, как превратить выбранную область в dataURI.