Хобрук: Ваш путь к мастерству в программировании

HTML-тег изображения со строкой base64 (URI данных)

Я получаю двоичные данные изображений jpeg из серии http-запросов примерно каждые 50-200 мс, я конвертирую эти данные в строку base64 и вставляю строку в тег img с помощью javascript.

var img = document.getElementById('img1');
img.src = 'data:image/jpeg;base64,' + b64str + '';

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

Я немного поискал и нашел

Internet Explorer 8 ограничивает URI данных максимальной длиной 32 КБ. (Internet Explorer 9 не имеет этого ограничения)

У меня нет компьютера с IE9, чтобы попробовать, у меня есть только IE8 и IE6. Может ли быть проблема в ограничении 32 КБ? Но почему изображение с первого раза отображается корректно, а после получения изображения чаще вырубается (всегда снизу вверх)?

javascript html jpeg internet-explorer-8 data-uri
21.06.2012

  • Можно ли установить img.src на тот же URL-адрес, что и httprequest, чтобы он получал данные напрямую? 21.06.2012
  • Ну да, образы обычно есть. Это не отвечает на мой вопрос. Почему бы вам не отказаться от всего XmlHttpRequest и просто установить для изображения src URL-адрес, который дает вам двоичные данные изображения? 21.06.2012
  • из-за проблем с синхронизацией 21.06.2012
  • Те существа? Вы можете использовать JS для изменения src каждые 50 мс и принудительной повторной загрузки изображения. Если вы беспокоитесь о кэшировании, добавляйте уникальный фиктивный параметр в конец URL-адреса каждый раз, когда вы его меняете. 21.06.2012
  • Ну, я уже пробовал, даже с событием img.onload() изображение всегда отображалось слишком поздно. 21.06.2012
  • Если вам нужно такое отображение в реальном времени, то я думаю, что вы идете совершенно неправильным путем. Что вам нужно, так это потоковое видео. Javascript с 200 HTTP-запросами в секунду — не лучший инструмент для этой работы; производительность никогда не будет адекватной. 21.06.2012
  • Я согласен, но ситуация для меня неизменна. 21.06.2012
  • На что вы можете повлиять? Неизменна ли серверная часть или клиентские технологии? Если это клиентская сторона, то вы облажались. Быстрее не будет. XmlHttpRequest и URL-адреса данных не помогут. 21.06.2012
  • Я могу только сказать серверу отправить мне вместо двоичных данных уже проанализированную строку base64. Но случилось то же самое. 21.06.2012
  • А можно что-нибудь посложнее? Одна глупая идея, которая у меня была, заключалась в том, чтобы заставить сервер непрерывно генерировать все кадры, как кадры в анимированном файле GIF. Браузер будет отображать их так, как он их получит. HTTP-соединение никогда не будет закрыто, пока окно не будет закрыто. Это как видеопоток бедняка. 21.06.2012
  • Есть только одна проблема - браузер будет хранить все данные GIF в памяти. Если окно остается открытым в течение длительного времени, это будет использовать много оперативной памяти. Возможным решением является использование Javascript, который время от времени создает новое изображение и отбрасывает старое. Хотя я не уверен, прервет ли браузер HTTP-соединение или можно ли сделать это незаметным для пользователя. 21.06.2012
  • В любом случае, я серьезно советую вам сказать вашему работодателю, что это невозможно (разумно) сделать таким образом, и необходимо решение для потоковой передачи видео. 21.06.2012
  • Тогда трюк с изменением src тоже должен сработать. Это не должно быть медленнее, чем загрузка тех же данных с помощью XmlHttpRequest, их кодировка base64 и назначение через URL-адрес данных. 21.06.2012
  • боюсь, что нет, изображения (размеры до 1600x1200) будут загружаться примерно 3-5 секунд (что уже слишком медленно), и аппаратное обеспечение также влияет на задержку, поэтому никогда невозможно сделать ее синхронной. 21.06.2012
  • Что именно вы имеете в виду под синхронным? Может быть, вы можете объяснить больше о вашей проблеме в целом? 21.06.2012
  • Хорошо, в httprequest картинка в формате jpeg, а в шапке какие-то данные. С данными я создаю наложение, которое я накладываю на изображение. Таким образом, наложение должно быть синхронизировано с изображением при отображении на экране. 21.06.2012
  • Хорошо, СЕЙЧАС это становится странным... Пожалуйста, расскажите мне о проблеме полностью - что это за проект, что это за изображения, почему вы пытаетесь сделать что-то подобное и т. д. Потому что сейчас это звучит просто безумно. :П 21.06.2012

Ответы:


1

Мне жаль это говорить, но для таких анимаций (5-20 кадров в секунду; в реальном времени) Javascript и HTTP-запрос на кадр не являются правильным решением. Вам нужна видеотрансляция. В противном случае, как ни старайся, видео будет рассинхронизировано, а сервер будет перегружен, и его будет использовать всего несколько человек.

21.06.2012
  • хорошо, задержку между полученными изображениями можно уменьшить примерно до 250 мс. 21.06.2012
    • Новые материалы
    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..