Блог

Я работал над небольшой страницей, которая будет работать только для создания фотографий с вашей веб-камеры и их загрузки. Все было в порядке, я подключил веб-камеру к видеоэлементу, сделал «скриншот» кадра и поместил его с нужным размером в элемент canvas. Проблема в том, что я хотел, чтобы фотография и видео выглядели так, как если бы они были зеркалом. Для видео и элемента canvas проблем не возникло, поскольку этот CSS-код идеально инвертирует изображение:

   -moz-transform: scaleX(-1); /* Firefox */
  -o-transform: scaleX(-1); /* Opera */   
  -webkit-transform: scaleX(-1); /* Chrome y Safari */
  transform: scaleX(-1); /* w3org */
  filter: FlipH; /* Internet Explorer */
  

Проблема в том, что когда я конвертирую холст в файл .png, чтобы пользователь мог его загрузить, набор правил CSS не соблюдается, поэтому выглядит странно, что изображение противоположно тому, что было на предварительном просмотре видео.
Я могу инвертировать его с помощью того же кода в браузере, но, конечно, это не изменит файл, который пользователь загрузит…

Итак, есть какой-нибудь способ заставить их соблюдать правила CSS? Или, по крайней мере, инвертировать изображение перед его созданием …?

Обновить: Видео, которое я воспроизводю, снято с веб-камеры, вы должны нажать эту кнопку с надписью «НАЧАТЬ ВИДЕО». В любом случае, на скрипке материал html не подходит. И да, значок камеры по умолчанию справа будет заменен, как только пользователь сделает первый снимок. Как только начнется видео, появятся три прямоугольника, слева первый будет предварительным просмотром видео, второй — элементом холста, а последний — созданным файлом изображения. Все было протестировано и хорошо работало при локальной настройке LAMP в Ubuntu 13 и браузере Chromium.

Вот мой Fiddle

P.D: Это мой index.html