Сайт бюро

Обёртки для скриншотов

Модуль для скриншотов десктопной версии

+browserScreenshot({
  src: 'image.png',
  address: 'test.ru',
})

Модификаторы

mod: 'noBorder' — удаляет рамку;
mod: 'headOverlay' — накладывает шапку браузера поверх скриншота;
mod: 'headBorder' — добавляет снизу шапки линейку, совпадающую по параметрам с внешней рамкой браузера;
mod: 'shadow' — добавляет тень.

Цвета

‑‑browserColor — цвет шапки браузера;
‑‑browserAddressColor — цвет текста в шапке;
‑‑browserDotsColor — цвет точек в шапке;
‑‑browserBorderColor — цвет рамки.

Чтобы переопределить цвет для отдельной обёртки, а не всей страницы можно использовать style. Например:

style: '--browserColor: #fff; --browserDotsColor: #000; --browserAddressColor: #6A36B2; --browserDotsColor: #6A36B2;'

Дефолтный цвет рамки

test.ru

Шапка и рамка дефолтного цвета

+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
})

test.ru

Кастомный цвет шапки

--browserColor: #6A36B2;
--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
})

test.ru

Кастомный цвет шапки в цвет скрина

--browserColor: #fff;
--browserDotsColor: #000;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
})

test.ru

Кастомный цвет шапки + рамка под шапкой

--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'headBorder',
})

test.ru

Шапка накладывается на скриншот

--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'woman.png',
  address: 'test.ru',
  mod: 'headBorder',
})

Рамка кастомного цвета

test.ru

Шапка дефолтного цвета + рамка в цвет шапки

--browserBorderColor: #ebebeb;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
})

test.ru

Кастомный цвет шапки + рамка в цвет шапки

--browserColor: #6A36B2;
--browserBorderColor: #6A36B2;
--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
})

test.ru

Кастомный цвет шапки в цвет скрина + рамка в цвет шапки

--browserColor: #fff;
--browserBorderColor: #fff;
--browserDotsColor: #000;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
})

test.ru

Кастомный цвет шапки + кастомный цвет рамки + рамка под шапкой

--browserBorderColor: #6A36B2;
--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'headBorder',
})

gamecomingsoon.com

Шапка накладывается на скриншот + кастомный цвет рамки

--browserBorderColor: #000;
--browserDotsColor: #000;
 
+browserScreenshot({
  src: 'man.png',
  address: 'gamecomingsoon.com',
  mod: 'headOverlay',
})

Без рамки

test.ru

Шапка дефолтного цвета

+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'noBorder',
})

test.ru

Кастомный цвет шапки

--browserColor: #A32EFF;
--browserAddressColor: #fff;
--browserDotsColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'noBorder',
})

test.ru

Кастомный цвет шапки в цвет скрина

--browserColor: #fff;
--browserDotsColor: #6A36B2;
--browserAddressColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'noBorder',
})

test.ru

Кастомный цвет шапки + рамка под шапкой (не отображается, так как стоит noBorder)

--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'headBorder noBorder',
})

test.ru

Шапка накладывается на скриншот

--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'game.png',
  address: 'test.ru',
  mod: 'headBorder noBorder',
})

Дефолтный цвет рамки с тенью

test.ru

Шапка и рамка дефолтного цвета

 +browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'shadow',
})

test.ru

Кастомный цвет шапки

--browserColor: #6A36B2;
--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'shadow',
})

test.ru

Кастомный цвет шапки в цвет скрина

--browserColor: #fff;
--browserDotsColor: #6A36B2;
--browserAddressColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'shadow',
})

test.ru

Кастомный цвет шапки + рамка под шапкой

--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'headBorder shadow',
})

test.ru

Шапка накладывается на скриншот

--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'woman.png',
  address: 'test.ru',
  mod: 'headOverlay shadow',
})

Рамка кастомного цвета с тенью

test.ru

Шапка дефолтного цвета + рамка в цвет шапки

--browserBorderColor: #ebebeb;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'shadow',
})

test.ru

Кастомный цвет шапки + рамка в цвет шапки

--browserColor: #000;
--browserBorderColor: #000;
--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'shadow',
})

test.ru

Кастомный цвет шапки в цвет скрина + рамка в цвет шапки

--browserColor: #fff;
--browserBorderColor: #fff;
--browserDotsColor: #000;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'shadow',
})

test.ru

Кастомный цвет шапки + кастомный цвет рамки + рамка под шапкой

--browserBorderColor: #6A36B2;
--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'headBorder shadow',
})

gamecomingsoon.com

Шапка накладывается на скриншот + кастомный цвет рамки

--browserBorderColor: #000;
--browserDotsColor: #000;
 
+browserScreenshot({
  src: 'man.png',
  address: 'gamecomingsoon.com',
  mod: 'headOverlay shadow',
})

Без рамки с тенью

test.ru

Шапка дефолтного цвета

+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'noBorder shadow',
})

test.ru

Кастомный цвет шапки

--browserColor: #000;
--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'noBorder shadow',
})

test.ru

Кастомный цвет шапки в цвет скрина

--browserColor: #fff;
--browserDotsColor: #000;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'noBorder shadow',
})

test.ru

Кастомный цвет шапки + рамка под шапкой (не отображается, так как стоит noBorder)

--browserColor: #9EFF00;
--browserAddressColor: #6A36B2;
--browserDotsColor: #6A36B2;
 
+browserScreenshot({
  src: 'koftyonyshi.png',
  address: 'test.ru',
  mod: 'headBorder noBorder shadow',
})

test.ru

Шапка накладывается на скриншот

--browserAddressColor: #fff;
 
+browserScreenshot({
  src: 'game.png',
  address: 'test.ru',
  mod: 'headOverlay noBorder shadow',
})

Разные размеры с дефолтным состоянием

test.ru

lessThanTextWidth

test.ru

textWidth

test.ru

На всю страницу

Два скриншота рядом

Два скриншота с тенью рядом

Обратная совместимость

1. +browserScreenshot без настроек:
Японский язык без страха

Было

bureau.ru

Стало

2. +browser без настроек:
полка Левелвана

Было

bureau.ru

Стало

5. Браузер перекрашивается и исчезает адресная строка в шапке:
кофтёныши

Было

Стало

4. Браузер перекрашивается, адресная строка была спрятана:
высшая школа главбуха

Было

Стало

5. Паралаксед

Страница товара встречает клёвыми фотками и объяснением, что такое кофтёныш:

6. Браузер с классом width50:
кабинет школы

Было

bureau.ru

Стало

7. Браузер с классом width75:
кабинет школы

Было

bureau.ru

Модуль для скриншотов мобильной версии

+mobileScreenshot({ src: 'image_mobile.png' })

Модификаторы

mod: 'noBorder' — удаляет рамку;
mod: 'shadow' — добавляет тень;
mod: 'parallaxed' — паралаксит скриншот внутри обёртки при прокрутке страницы.

Цвета

‑‑browserBorderColor — цвет рамки.

Чтобы переопределить цвет для отдельной обёртки, а не всей страницы можно использовать style. Например:

style: '--browserBorderColor: #6A36B2;'

Варианты рамки

Рамка дефолтного цвета

+mobileScreenshot({
  src: 'koftyonyshi_mobile.png',
})

Рамка кастомного цвета

--browserBorderColor: #6A36B2;
 
+mobileScreenshot({
  src: 'koftyonyshi_mobile.png',
})

Без рамки

+mobileScreenshot({
  src: 'koftyonyshi_mobile.png',
  mod: 'noBorder',
})

С тенью

Рамка дефолтного цвета с тенью

+mobileScreenshot({
  src: 'koftyonyshi_mobile.png',
  mod: 'shadow',
})

Рамка кастомного цвета с тенью

--browserBorderColor: #6A36B2;
 
+mobileScreenshot({
  src: 'koftyonyshi_mobile.png',
  mod: 'shadow',
})

Без рамки с тенью

+mobileScreenshot({
  src: 'koftyonyshi_mobile.png',
  mod: 'noBorder shadow',
})

С анимацией

Перед использованием проверить, что нет глюков в Сафари.

Разной высоты

C паралаксом

Скриншот прокручивается внутри обёртки

+mobileScreenshot({
  src: 'dark-mobile.png',
  mod: 'parallaxed',
  frameHeight: '208%',
})

Отправить

Запинить

Твитнуть