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

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 картинка изображение мобильная платформа

См. также

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

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

28800 руб.

27.03.2025    55933    30    25    

44

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Программист Пользователь 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. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

3000 руб.

22.04.2019    111675    675    203    

356

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

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

18500 руб.

30.05.2023    5259    6    0    

6

Мобильная разработка Мессенджеры и боты 1С:Предприятие 8 Платные (руб)

Теперь создать telegram-бота - элементарно. Достаточно просто нарисовать блок-схему телеграм-бота, и он сразу заработает. Это возможно при использовании Графического конструктора телеграм-ботов. Это единственный конструктор ботов для telegram, чье качество и функционал подтверждены фирмой 1С, есть сертификат 1С:Совместимо. Расширение в интерактивном режиме, с помощью блок-схем, позволяет с минимальными трудозатратами создать телеграм-ботов в любой конфигурации, работающей на платформе «1С:Предприятие 8.3».

13200 руб.

27.12.2021    48814    127    172    

225

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

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

36000 руб.

28.08.2025    2600    1    2    

4

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

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

3000 руб.

03.12.2018    66157    222    106    

185

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

Расширение «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

6000 руб.

14.01.2016    58211    20    25    

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



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

Зачем сжимать картинки? Если там PNG, JPG или GIF (а там именно они) то они уже идут сжатыми.
Сжатие уже сжатых данных, не дает ничего кроме увеличения времени на сжатие и размера исходных данных.
Izumov; Yakud3a; +2 Ответить
4. nbelyaev 838 20.04.17 10:11 Сейчас в теме
(3) со временем согласен, но вот размер все таки уменьшается. Если зиповать картинку с ультра-сжатием, то с 11Мб лично у меня сжимается до 10700Кб, то есть 300Кб ужалось. С мелкими выигрыш тоже есть. Так что каждый сам для себя решит - сжимать и выиграть чуть-чуть трафика, но потерять во времени или не сжимать.
Поправьте, если ошибаюсь, но ХЗ и зип по сути тоже самое
5. Yakud3a 21.04.17 09:24 Сейчас в теме
(4) Я может что то не понимаю, картинка уже на устройстве, какой выигрыш в трафике? Вы скачали 11мб на телефон, сжали, запихали во временное хранилище, потом вытащили от туда, потом снова сохранили на телефон.... Картинка уже на устройстве, так для чего этот изврат?
6. nbelyaev 838 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; user1203706; akR00b; uservak; Ukubaeva; join2us; +6 Ответить
11. Illia817897 2 24.02.21 22:51 Сейчас в теме
Спасибо,очень помогло!
12. privin731 26.03.21 16:07 Сейчас в теме
Добрый день! Убедительная просьба: поясните на конкретном примере что означает +пАдресВоВременномХранилище+ , ибо я не волшебник, я только учусь!
13. Bezdar 4 06.08.21 11:14 Сейчас в теме
(12) пАдресВоВременномХранилище= Новы ХранилищеЗначения( -Двоичные Данные картинки-);
таким макаром получается ссылка на ячейку, в хранилища в БД, где будут лежать двоичные данные картинки в текущей сессии.
14. Prometeus2011 178 16.05.24 14:25 Сейчас в теме
(13) Не ХранилищеЗначения)))).
Временное хранилище.
Вот так: пАдресВоВременномХранилище = ПоместитьВоВременноеХранилище(БиблиотекаКартинок.Photo,ЭтаФорма.УникальныйИдентификатор);
15. Bezdar 4 16.05.24 18:31 Сейчас в теме
(14)
Хелп читал ? ))))))
Новый ХранилищеЗначения(<Значение>, <АлгоритмСжатияДанных>)

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