При разработке мобильных приложений на платформе 1С разработчики часто сталкиваются со ситуацией, когда стандартный механизм отображения картинок работает нестабильно. В тонком клиенте на ПК изображение из хранилища значений открывается без нареканий, но на мобильном устройстве в элементе формы Поле картинки отображается пустой квадрат, крестик или ошибка чтения файла. Рассмотрим подробно причины возникновения этой проблемы и разберем практические способы её решения.
Главная причина некорректного вывода картинок на мобильной платформе заключается в различиях обработки графики на настольных компьютерах и мобильных устройствах. Выделим несколько ключевых факторов:
e1cib/tempstorage/....Наиболее надежный способ решить проблему — предобработка изображения перед его выводом на форму или перед отправкой на мобильное устройство. В платформе 1С для этого предусмотрен объект ОбрабатываемаяКартинка.
Рассмотрим пример кода, который уменьшает габариты слишком большого изображения и принудительно переводит его в подходящий формат:
&НаСервере
Функция ПодготовитьКартинкуДляМобильного(ДвоичныеДанныеИсходные)
Картинка = Новый Картинка(ДвоичныеДанныеИсходные);
// Создаем объект для обработки
Обработка = Новый ОбрабатываемаяКартинка(Картинка);
// Масштабируем изображение, если его размер превышает допустимый для мобильного GPU
Обработка.Масштабировать(1024, 1024);
// Получаем сжатую картинку в формате JPEG (с нормализацией цвета в RGB)
ГотоваяКартинка = Обработка.ПолучитьКартинку(ФорматКартинки.JPEG, 85);
Возврат ГотоваяКартинка.ПолучитьДвоичныеДанные();
КонецФункции
Использование метода Масштабировать позволяет сохранить пропорции файла, существенно снизить нагрузку на мобильное устройство и гарантировать приведение картинки к цветовой модели RGB.
Как показывает практика, при возникновении сбоев с файлами JPEG пересохранение графических данных в формат PNG избавляет от проблем с отображением на многих версиях мобильной платформы. Посмотрим, как выполнить перекодирование данных:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
ДвоичныеДанныеФайла = ПолучитьИзХранилищаДанныеФайла();
Если ДвоичныеДанныеФайла <> Неопределено Тогда
КартинкаИсходная = Новый Картинка(ДвоичныеДанныеФайла);
Обработка = Новый ОбрабатываемаяКартинка(КартинкаИсходная);
// Преобразуем данные в формат PNG
КартинкаPNG = Обработка.ПолучитьКартинку(ФорматКартинки.PNG);
ДДКартинки = КартинкаPNG.ПолучитьДвоичныеДанные();
АдресКартинки = ПоместитьВоВременноеХранилище(ДДКартинки, УникальныйИдентификатор);
КонецЕсли;
КонецПроцедуры
Обратите внимание: файлы формата PNG без сжатия могут весить больше оригинала в формате JPEG. Поэтому данный метод рекомендуется комбинировать с предварительным уменьшением разрешения файла.
Разберем архитектурный подход, который позволяет избежать передачи тяжелых сканов на мобильные устройства. В центральной базе целесообразно хранить два варианта файла:
Сконвертировать оригинал в копию для мобильного клиента можно в обработчике ПередЗаписью при загрузке документа или прикреплении скана в центральной информационной базе.
Если элемент формы Поле картинки продолжает выдавать ошибку, можно использовать альтернативный вариант — элемент формы Поле HTML документа. Этот метод обходит ограничение стандартных элементов управления 1С, загружая картинку напрямую через веб-декодер операционной системы с использованием строки Base64.
Проанализируем пример формирования кода HTML для отображения картинки из двоичных данных:
&НаКлиентеИлиНаСервереБезКонтекста
Функция СформироватьHTMLКартинки(ДвоичныеДанные, ИмяФормата = "jpeg")
СтрокаBase64 = Base64Строка(ДвоичныеДанные);
// Удаляем возможные переносы строк в Base64
СтрокаBase64 = СтрЗаменить(СтрокаBase64, Символы.ПС, "");
СтрокаBase64 = СтрЗаменить(СтрокаBase64, Символы.ВК, "");
ТекстHTML = "<html><body style='margin:0; padding:0; background-color:#f0f0f0; display:flex; justify-content:center; align-items:center;'>";
ТекстHTML = ТекстHTML + "<img src='data:image/" + ИмяФормата + ";base64," + СтрокаBase64 + "' style='max-width:100%; height:auto;' />";
ТекстHTML = ТекстHTML + "</body></html>";
Возврат ТекстHTML;
КонецФункции
В этом случае реквизит формы с типом Строка (содержащий сформированный HTML-код) связывается с полем HTML-документа. Изображение будет автоматически масштабироваться под ширину экрана мобильного устройства.
Если данные хранятся непосредственно в информационной базе мобильного приложения (например, в справочнике или регистре сведений), вызывать ПоместитьВоВременноеХранилище не всегда обязательно. Выясним, как правильно использовать прямое получение ссылок:
&НаСервере
Процедура ЗагрузитьКартинкуНаСервере()
// Если картинка хранится в реквизите объекта
АдресКартинки = ПолучитьНавигационнуюСсылку(Объект.Ссылка, "ДанныеКартинки");
КонецПроцедуры
Если же вы получаете двоичные данные из внешнего источника или локального файла на устройстве, помещайте их во временное хранилище с передачей контекста текущего сеанса мобильного приложения (УникальныйИдентификатор):
&НаКлиенте
Процедура ПоказатьФайлНаКлиенте(ДвоичныеДанные)
АдресКартинки = ПоместитьВоВременноеХранилище(ДвоичныеДанные, УникальныйИдентификатор);
КонецПроцедуры
Для стабильного отображения графических файлов на мобильной платформе 1С необходимо соблюдать следующие правила:
ОбрабатываемаяКартинка.