Включаем функцию скриншота в виртуальные туры Pano2VR (+ компонент)

 Работа в Pano2VR | Веб-кодинг в Pano2VR, Создание VR-панорам и виртуальных туров, Редактор оформления (Skin editor)
 09.02.2023 |  11:45 |  610 |  0.0/0 |  02.11.2023
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
В панорамах и виртуальных турах, опубликованных на сайте, не так давно появилась функция, позволяющая делать скриншот панорамы. Сейчас я расскажу вам, как вы можете использовать такой функционал в своих проектах.

Включаем функцию скриншота в виртуальные туры Pano2VR (+ компонент)

Изображение

Подводка

В панорамах и виртуальных турах, опубликованных на сайте, не так давно появилась функция, позволяющая делать скриншот панорамы. Сейчас я расскажу вам, как вы можете использовать такой функционал в своих проектах.

Функция создания скриншотов создает изображение всей области воспроизведения панорамы в оригинальном размере. Иными словами, размер изображения скриншота будет напрямую зависеть от размеров области, в которой воспроизводится панорамный контент или от разрешения монитора в случае воспроизведения в полноэкранном режиме.

Окно с изображением скриншота текущего вида панорамы.

Функционал, реализованный на моем сайте предоставляет пользователю возможность предварительного просмотра с сохранением изображения с помощью пункта контекстного меню «Сохранить картинку как…» или копирования в буфер обмена с помощью пункта «Копировать картинку». Кроме этого функция сохранения изображения продублирована с помощью кнопки «Сохранить изображение» пользовательского интерфейса.

Так реализовано у меня. Вы можете сделать иначе. Приведу только основные моменты, касающиеся создания скриншотов.

Создание изображения с помощью метода canvas.toDataURL()

Для захвата изображения понадобится следующая строка кода на JavaScript.

var imageDataURL = pano.getWebGlContext().canvas.toDataURL("image/jpeg", 1.0);

Данная строка кода получает контекст рендеринга WebGL и кодирует изображение элемента canvas в представление base64. Её результатом является строка, которая может быть использована в качестве значения атрибута src элемента img. Объясню её составляющие.

  • var imageDataURL
    – переменная, в которую будет записан результат;
  • pano
    – экземпляр объекта создаваемый в результате вызова
    pano = new pano2vrPlayer();
    (см. исходный код index.html);
  • getWebGlContext()
    – метод получения контекста рендеринга WebGL;
  • canvas
    – свойство, содержащее ссылку на объект canvas (холст) веб-интерфейса HTMLCanvasElement, связанный с контекстом;
  • toDataURL()
    – метод объекта canvas (холста) веб-интерфейса HTMLCanvasElement, возвращающий URL-адрес, содержащий представление изображения в кодировке base64, например
    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby

Метод toDataURL() имеет два необязательных параметра:

  • type – строка, задающая формат изображения в стандарте MIME: image/png, image/jpeg, image/webp. По умолчанию – image/png;
  • encoderOptions – число между 0 и 1, указывающее качество изображения для форматов, использующих сжатие с потерями, таких как image/jpeg и image/webp. По умолчанию – 0.92.

Модификация вызова pano2vrPlayer()

Попытка выполнить код приведет к тому, что вместо скриншота получится пустое черное изображение. Дело в том, что по соображениям производительности и совместимости браузер по умолчанию очищает буфер рисования холста WebGL после отрисовки на нем. Чтобы этого не происходило, необходимо изменить вызов pano2vrPlayer() в исходном коде index.html, добавив параметр preserveDrawingBuffer со значением true.

// create the panorama player with the container
pano = new pano2vrPlayer("container", { webGLFlags: { preserveDrawingBuffer:true } });

Компонент

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

Внешний вид составляющих компонента pano_screenshot.ggskc.

Для того, чтобы не править исходный код файла index.html после каждого экспорта внесите изменение, о котором описывалось в предыдущем разделе статьи, в исходный код шаблон html5 с названием normal.ggt, сделав его копию. Я уже позаботился о вас и сделал шаблоны для версий Pano2VR 6 и 7. Вам остается только скачать по ссылке внизу и скопировать файлы из архива в каталог шаблонов. Путь каталогу шаблонов вы можете узнать в настройках – опция HTML Template Directory.

Настройки программы: пути к файлам и папкам.

Компонент имеет три текстовых поля:

  • caption – заголовок окна;
  • ss_object – в это поле будет помещен HTML-код изображения для предварительного просмотра;
  • btn_save_ss – в это поле будет помещен HTML-код ссылки на скачивание изображения.

Захват скриншота и показ окна предварительного просмотра происходит по нажатию кнопки btn_create_ss. Для этого в сценариях для кнопки добавлен обработчик события Mouse Click с вызовом JavaScript-кода в действии Go to URL. Код выглядит следующим образом.

javascript:"";
//Имя файла для использования в диалоговом окне сохранения
var imageFileName = 'screenshot-image-' + window.location.pathname.substring(1) + '.jpg';

//Base64-кодированное изображение скриншота
var imageDataURL = pano.getWebGlContext().canvas.toDataURL("image/jpeg", 1.0);

//Вставка HTML-кода в поле ss_object
me._ss_object__text.innerHTML="<img id='panorama-screenshot' width='600' src='" + imageDataURL + "' />";

//Вставка HTML-кода в поле btn_save_ss
me._btn_save_ss__text.innerHTML="<a id='download-image' download onclick='this.download = &apos;" + 
imageFileName + "&apos;;this.href = &apos;" + imageDataURL.replace('image/jpeg', 'image/octet-stream') + 
"&apos;;' style='text-decoration: none; cursor: pointer; padding: 10px; font-size: small;'>Сохранить изображение</a>";

Вы можете менять дизайн компонента под стиль дизайна оформления.

Когда-нибудь я выпущу новую версию компонента, которая будет иметь возможность настройки без модификации структуры элементов.

И еще забыл добавить следующее. Компонент заточен под работу на ПК и не отображается при просмотре панорамного контента на мобильных устройствах.

Теги:  skin editor, HTML, Pano2VR6, трюки, javascript, Pano2VR5, Pano2VR7, Pano2VR
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Оцените материал
Поделитесь материалом в социальных сетях
Материалы по теме статьи

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

Если этот материал совсем не то, куда Вас привел поисковик, попробуйте выполнить поиск по сайту или введите запрос в строку ниже. Также Вы можете посмотреть другие материалы в разделе статьи.

Нет комментариев
Сейчас просматривают
Связь со мной и соцсети
Telegram
Viber
LinkedIn
ВКонтакте
 
Одноклассники
 
Instagram
 
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 40
Онлайн всего: 4
Гостей: 4
Пользователей: 0