В настоящее время я разрабатываю приложение на мобильном устройстве (Android и iPhone) с ионным и Cordova. Я хотел бы отредактировать изображение. Я использую библиотеку fabric.js, чтобы сделать это. Fabric.js преобразует изображение и другие элементы в холст. Затем я добавляю изображение на холст (наклейки) и экспортирую его как изображение (dataURL). Таким образом, размер холста действительно важен, потому что это фактор качества (экспорт изображения на основе небольшого холста приведет к низкому качеству). Размер холста составляет около 607 * 1080 пикселей (в зависимости от устройства, на котором была сделана фотография). Я хотел бы разместить его на экране без потери качества (как описано ниже, я не могу изменить размер холста без потери качества).

Я попробовал 3 идеи, но никто не работал.

Изменить размер холста : потеря качества (экспортированное изображение будет иметь размер холста)Адаптировать область просмотра : cordova не позволяет менять видовой экран на мобильном устройстве. Есть обходной путь, но он сломает мой дизайн (очень маленькая навигационная панель, маленькое меню, ...)Использовать свойства масштабирования CSS3 : На настольном компьютере это работает как шарм, но на мобильном устройстве существует проблема с отображением событий (я не пробовал на ios, но проблема возникла на Android Webview). Отображение событий не увеличено. Холст уменьшен, но невозможно взаимодействовать с элементами холста. Если элемент canvas (стикер) расположен в x: 100 y: 100, когда я устанавливаю свойство zoom в 0.5, элемент будет находиться в позиции (50,50) и не более в точке (100,100). Есть ли способ исправить отображение событий в зависимости от свойства масштаба веб-просмотра Android?

Я не знаю, есть ли другие способы сделать это, но я застрял с этой проблемой в течение 3 дней, и я провожу много времени на форумах, fabricjs doc и google, и я не нахожу никакого рабочего решения или что-то еще, что может мне помочь.

РЕДАКТИРОВАТЬ:Ниже приведены 2 рабочих решения. Проверьте мой ответ, чтобы увидеть, как это сделать с помощью CSS.