1

В своем проекте я использую ngx-webcam для того, чтобы позволить пользователю делать фото себя.

Каким образом можно добавить какой-нибудь контейнер с маркерами, чтобы пользователь мог понимать как будет сделано фото (видеть центр и края)?

Возможно ли сделать это с css?

1 ответ 1

0

Изображение из веб-камеры будет находиться (то есть, вписано) в центре рамки (viewport), заданной свойствами самого webcam, то есть [width] и [height], соответственно пользователь будет видеть края изображения.

Таким образом, рекомендую и в css, и в свойства webcam задавать одни и те же значения размеров, тогда и крестик будет в центре и css-рамка вокруг viewport.

CSS выглядит вот таким образом:

webcam {
  position: absolute;
  width: 640px;  /* Ширина рамки. Это не свойство [width] компонента */
  height: 480px; /* Высота рамки */

  border-width: 4px; /* Ширина борта */
  border-color: red; /* Цвет */
  border-style: solid; /* Тип */
  border-radius: 5px; /* Радиус закругления углов */

  background: lightcyan; /* Цвет фона */  
}

/* Крестик (знак +) в середине рамки */
webcam:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "+"; /*Можно использовать HEX-code любого символа*/
    font-size: 30px; /* размер символа */
    color: red; /*его цвет*/
    line-height: 480px; /* Межстрочный интервал. Выравнивание крестика по-вертикали */
    text-align: center; /* Выравнивание по-горизонтали */
}
2
  • спасибо большое за развернутый ответ! сделала под параметры веб-камеры(ширину и высоту), но столкнулась с проблемой то, что при попытке открытия на телефоне рамка слишком большая 3 дек 2020 в 18:10
  • @ChihiroOgino попробуйте задать как отдельный вопрос, с примером проблемы с которой вы столкнулись при запуске на телефоне. Так будет понятнее и нагляднее, чем смешивать все вопросы в один 4 дек 2020 в 6:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.