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

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С:ERP Управление предприятием 2 1С:Управление холдингом 1С:Зарплата и Управление Персоналом 3.x 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Управление торговлей 11 Платные (руб)

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

31720 руб.

27.03.2025    81307    55    42    

66

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

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

3050 руб.

03.12.2018    69122    236    106    

187

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

373

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

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

19000 руб.

24.06.2025    2719    25    0    

3

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

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

6100 руб.

14.01.2016    60455    22    25    

47

Работа с интерфейсом Рабочее место 1С:Предприятие 8 1C:Бухгалтерия 1С:Комплексная автоматизация 2.х Платные (руб)

Универсальный редактор картинок 1С предназначен для обработки изображений в режиме «Предприятие», с возможностью рисовать на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). В комплект поставки включены Расширения для легкого подключения данного функционала в БК, УТ, КА и ERP. Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Обработка будет особенно полезна тем, кто вносит картинки в базу. Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6100 руб.

16.01.2015    68315    46    60    

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



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

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

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