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

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С v8.3 1С:Конвертация данных Платные (руб)

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

13200 руб.

27.12.2021    38196    108    161    

201

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

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

3000 руб.

03.12.2018    59291    192    103    

172

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

2000 руб.

22.04.2019    97225    586    189    

321

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

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

3450 руб.

28.04.2023    9469    15    0    

9

Мобильная разработка Платформа 1С v8.3 Конфигурации 1cv8 Финансовые услуги, инвестиции Управленческий учет Платные (руб)

Мобильное приложение и конфигурация 1С для автоматической торговли на бирже через API Тинькофф банка. Достаточно задать настройки, нажать «Пуск», и робот сам торгует ежедневно.

7000 руб.

25.05.2022    4644    1    0    

6

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

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

6000 руб.

16.01.2015    62986    44    59    

82

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 1С:ERP Управление предприятием 2 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    18855    26    6    

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



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

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

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