Отображение картинок в рамках мобильной платформы

19.04.17

Разработка - Работа с интерфейсом

Решение проблемы с отображением картинок в формате JPEG в рамках мобильной платформы. Показ "тяжелых" картинок и анимации.

Всех приветствую!

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

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

В данном случае картинки хранятся на сервере, поэтому на сервере картинку получаем в виде двоичных данных, пакуем, сериализуем и отправлем клиенту. Клиент десериализует распаковывает и двоичные данные записывает во временный файл. Вот код, решение крайне простое.

Сервер:

ДвоичныеДанные    = Новый ДвоичныеДанные(<ПутьККартинке>);
ХранилищеКартинки = Новый ХранилищеЗначения(ДвоичныеДанные, Новый СжатиеДанных(9));

Клиент:

ДвоичныеДанные = ХранилищеКартинки.Получить();
ВременныйФайл  = ПолучитьИмяВременногоФайла();
ДвоичныеДанные.Записать(ВременныйФайл);

ИнфоHTML = "<html>
                |<head>
                |<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
                |</head>
                |<body>
                |<img src = " + ВременныйФайл + ">
                |</body>
                |</html>";

Также на клиенте при закрытии формы, в которой отображается картинка, необходимо убрать за собой временный файл путем метода УдалитьФайлы().

Для отображения картинки на форме используем HTML-поле (ИнфоHTML в коде), в котором атрибуту src тега <img> (отвечает за вывод изображения)  присваиваем значение пути к временному файлу. ВСЕ. В результате jpg отображается без проблем, кроме того, размер его может быть очень большим - в качестве теста попробовал фото, размером 11Мб, все отработало как нужно. Также в данном способе нет особой необходимости регулировать размеры изображения, т.к. это можно делать двумя пальцами (уменьшать/растягивать). Ну, и что совсем обрадовало - GIF анимация тоже работает без нареканий.

Ниже гифка, записанная с экрана телефона.

Вступайте в нашу телеграмм-группу Инфостарт

анимация gif картинка изображение мобильная платформа

Вы можете заказать платную адаптацию этой статьи под ваши задачи на «Бирже заказов».

  • 0% комиссии — оплата напрямую исполнителю;
  • Исполнители любого масштаба — от отдельных специалистов до команд под проект;
  • Прямой обмен контактами между заказчиком и исполнителем;
  • Безопасная сделка — при необходимости;
  • Рейтинги, кейсы и прозрачная система откликов.

См. также

Работа с интерфейсом Анализ учета Мониторинг 1С:Предприятие 8 1С 8.3 1C:Бухгалтерия 1С:Бухгалтерия 3.0 1С:ERP Управление предприятием 2 1С:Управление холдингом 1С:Зарплата и Управление Персоналом 3.x 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Управление торговлей 11 Платные (руб)

Создайте свой функциональный интерфейс в любой конфигурации 1С с помощью расширения Infostart Dashboard. Настраивайте панели виджетов с метриками, индикаторами и показателями на начальном экране. Узнайте возможность внедрения подсистемы у себя в конфигурации с помощью бесплатной обработки "Анализ внедрения подсистемы 1С Infostart Dashboard"!

31720 руб.

27.03.2025    89585    68    44    

75

Мобильная разработка Сканер штрих-кода Терминал сбора данных 1С:Предприятие 8 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Сбор заказов, инвентаризация, проверка ценников, просмотр полной информации об остатках и ценах со смартфона Онлайн - все это содержит в себе решение 1С "Штрихкод-информер" (штрих-код чекер). Отправка данных со смартфона выполняется либо напрямую в открытую форму документа, отсканировав QR-код, либо в общую корзину учетной системы, не подходя к компьютеру. Кассир или оператор сможет просмотреть список присланных данных и загрузить в любую форму, поддерживающую работу с ТСД. Для работы с мобильным приложением требуется опубликовать HTTP-сервис из поставляемого расширения.

3050 руб.

03.12.2018    71983    247    106    

189

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Программист Пользователь 1С:Предприятие 8 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Простой мобильный ТСД (терминал сбора данных) сканер для 1С для смартфонов на iOS и Android, не требующий сложных настроек и установки дополнительных программ. Обмен между Вашей 1С и мобильным приложением осуществляется через облачный сервис и расширение конфигурации. Работает с конфигурациями УТ 11, ERP, КА2, Розница 2, Розница 3, УНФ 1.6, УНФ 3.0. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически. Решение предназначено для считывания штрихкодов, а не для их создания и печати.

3050 руб.

22.04.2019    122827    727    207    

386

Консолидация данных Работа с интерфейсом Программист Пользователь 1С:Предприятие 8 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 1C:ERP Узбекистан Беларусь Кыргызстан Россия Казахстан Платные (руб)

Знакомая ситуация? Пользователи, особенно менеджеры, уверены: отборов много не бывает. Идут пожелания добавить в форму списка еще один быстрый фильтр, еще два, еще пять... В итоге интерфейс превращается в нагромождение полей отбора, а потребность в «самом главном» отборе, который «вот прямо сейчас нужен», все равно не закрыта. Универсальное расширение, которое решает эту проблему элегантно и технологично. С его помощью в любую форму списка можно легко добавить панель настраиваемых кнопок-закладок, каждая из которых применяет сложный фильтр-запрос, а так же показывает актуальное количество элементов в реальном времени.

6088 руб.

17.10.2025    2931    3    0    

2

Разработка Инструментарий разработчика Работа с интерфейсом Адаптация типовых решений Нейросети 1C:Бухгалтерия 1C:ERP 1С:ЗУП 1С:КА 1С:УНФ 1С:УТ 1С:Розница 1С:ДО 1С:ERP Управление предприятием 2 Платные (руб)

Разработка "Дизайнер форм 1С" реализована в виде расширения 1С и является универсальным инструментом для разработки прототипа форм с целью демонстраций, технических заданий и т.д. Без участия разработчика с возможностью экспорта в файл внешней обработки и генерации формы используя искусственный интеллект.

36600 руб.

28.08.2025    9407    2    2    

6

Мобильная разработка 1С:Предприятие 8 1С:Управление торговлей 11 Оптовая торговля, дистрибуция, логистика Россия Платные (руб)

"МРМ:Маркировка" для работы с конфигурациями 1С - готовое решение, позволяющее быстро автоматизировать работу учетной системы 1С на ордерном и безордерном складе при работе как с товарами, подлежащими обязательной маркировке, так и с товарами, учет которых построен на базе линейных штрих-кодов. Решение поддерживает большинство распространенных складских документов, необходимых для работы кладовщику на терминале сбора данных. Для начинающих пользователей имеется подробная инструкция по работе с приложением в разрезе видов документов.

19000 руб.

24.06.2025    3678    26    0    

4

Работа с интерфейсом Программист Стажер 1С:Предприятие 8 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024    54633    mrXoxot    44    

139
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. Fragster 1168 19.04.17 16:44 Сейчас в теме
Для небольших картинок можно через dataURLсделать, без временного файла, примерно так:
&НаСервереБезКонтекста
Функция ПолучитьDataUrlКартинки(Знач Картинка)
	Если Картинка = Неопределено Тогда
		Картинка = Новый Картинка;
	КонецЕсли;
	Стр = Base64Строка(Картинка.ПолучитьДвоичныеДанные());
	Стр = СтрЗаменить(Стр, Символ(10), "");
	Стр = СтрЗаменить(Стр, Символ(13), "");
	Возврат Стр;
КонецФункции
Показать



и выводить в html так:
data:image/png;base64,тутбэйз64данные
Suker86; aupovy; SuperMuper; akR00b; Lem0n; +5 Ответить
2. nbelyaev 841 19.04.17 16:57 Сейчас в теме
(1) Когда в базе несколько десятков тысяч картинок - сложно сказать, что все они будут небольшими. Однако, за идею спасибо, буду знать.
3. Diversus 2340 20.04.17 10:03 Сейчас в теме
Новый ХранилищеЗначения(ДвоичныеДанные, Новый СжатиеДанных(9));

Зачем сжимать картинки? Если там PNG, JPG или GIF (а там именно они) то они уже идут сжатыми.
Сжатие уже сжатых данных, не дает ничего кроме увеличения времени на сжатие и размера исходных данных.
Izumov; Yakud3a; +2 Ответить
4. nbelyaev 841 20.04.17 10:11 Сейчас в теме
(3) со временем согласен, но вот размер все таки уменьшается. Если зиповать картинку с ультра-сжатием, то с 11Мб лично у меня сжимается до 10700Кб, то есть 300Кб ужалось. С мелкими выигрыш тоже есть. Так что каждый сам для себя решит - сжимать и выиграть чуть-чуть трафика, но потерять во времени или не сжимать.
Поправьте, если ошибаюсь, но ХЗ и зип по сути тоже самое
5. Yakud3a 21.04.17 09:24 Сейчас в теме
(4) Я может что то не понимаю, картинка уже на устройстве, какой выигрыш в трафике? Вы скачали 11мб на телефон, сжали, запихали во временное хранилище, потом вытащили от туда, потом снова сохранили на телефон.... Картинка уже на устройстве, так для чего этот изврат?
6. nbelyaev 841 21.04.17 11:45 Сейчас в теме
(5)
В данном случае картинки хранятся на сервере, поэтому на сервере картинку получаем в виде двоичных данных, пакуем, сериализуем и отправлем клиенту.
из публикации.
Картинки не хранятся на телефоне
7. Ukubaeva 10.09.19 17:25 Сейчас в теме
Здравствуйте!
Всегда использовала такой способ отображения изображений на мобильной платформе - в поле HTML документа на устройствах с андроид 6.
Сейчас возникла необходимость расширить количество устройств, и как выяснилось, на андроид 7+ в поле HTML документа изображения не отображаются - просто квадрат с красным крестиком наверху.
Делала всегда через навигационную ссылку, сейчас переделала через временный файл, все равно то же самое.
Я что то пропустила, и теперь для отображения картинок применяется какой то другой механизм?
Или у всех это корректно работает, кроме меня? Просветите!)
8. Dales 02.02.20 22:32 Сейчас в теме
(7) Надо передавать адрес во временном хранилище - тогда работает.
9. Ukubaeva 03.02.20 04:04 Сейчас в теме
(8)это я конечно, так и делала, тоже не работает. Не работало в определённом сочетании версия платформы - версия Андроид. На Андроид 9 картинки отображаются корректно.
10. Dales 03.02.20 17:14 Сейчас в теме
(9)
Андроид 9 картинки отображаются корректно.

Пробовал на 7,8,9,10 (чистый андроид и муи). Все работает
ИнфоHTML = "<!DO CTYPE html>
|<ht ml>
|<head>
| <met a charset=""utf-8"">
| <title>Изображение</title>
| <st yle>
| figure {
| object-fit: cover;
| width: 100%; /* Ширина области */
| height: 300px; /* Высота области */
| margin: 0; /* Обнуляем отступы */
| }
| figure img {
| width: 100%; /* Ширина изображений */
| height: 100%; /* Высота изображении */
| object-fit: contain;
| }
| </style>
| </head>
| <body>
| <figure>
| <img src="+пАдресВоВременномХранилище+">
| </figure>
| </body>
|</html>";
KudelinMB; SuperMuper; akR00b; uservak; Ukubaeva; join2us; +6 Ответить
11. Illia817897 2 24.02.21 22:51 Сейчас в теме
Спасибо,очень помогло!
12. privin731 26.03.21 16:07 Сейчас в теме
Добрый день! Убедительная просьба: поясните на конкретном примере что означает +пАдресВоВременномХранилище+ , ибо я не волшебник, я только учусь!
13. Bezdar 1 06.08.21 11:14 Сейчас в теме
(12) пАдресВоВременномХранилище= Новы ХранилищеЗначения( -Двоичные Данные картинки-);
таким макаром получается ссылка на ячейку, в хранилища в БД, где будут лежать двоичные данные картинки в текущей сессии.
14. Prometeus2011 178 16.05.24 14:25 Сейчас в теме
(13) Не ХранилищеЗначения)))).
Временное хранилище.
Вот так: пАдресВоВременномХранилище = ПоместитьВоВременноеХранилище(БиблиотекаКартинок.Photo,ЭтаФорма.УникальныйИдентификатор);
15. Bezdar 1 16.05.24 18:31 Сейчас в теме
(14)
Хелп читал ? ))))))
Новый ХранилищеЗначения(<Значение>, <АлгоритмСжатияДанных>)

Создает объект ХранилищеЗначения и помещает в него заданное значение.
Конструктор доступен только в режиме запуска Толстый клиент, на сервере и внешнем соединении.
16. Prometeus2011 178 17.05.24 14:07 Сейчас в теме
(15) К чему эти буквы, которые вы написали?
17. Bezdar 1 08.12.25 12:45 Сейчас в теме
(16) Мат часть надо учить...
Для отправки сообщения требуется регистрация/авторизация