Раніше рідний інтерфейс Photo Editor. Редагування та експорт у поточній бета‑версії ще тестуються.

Xodera Plugins · Bubble Native

Xodera Photo Editor Native

Перетворіть вибране фото на аватар, зображення товару чи вкладення до звіту. Обріжте, поверніть і змініть розмір, а потім збережіть готову копію у застосунку.

Посібники публічних бета-версій · інструкції Haptics у його картці Bubble

Умови публічної бета-версії: Bubble безкоштовно · 7 днів з карткою, потім 1,50 USD/місяць за плагін у проєкті.

Побудуйте бізнес-процес ↓Налаштування плагіна ↗Native Lab

Документація переглянута 6 листопада 2026

Практичні сценарії

Однакові аватари

Користувачі повинні вибирати, яка частина їхнього фото буде показана у квадратному зображенні профілю, замість прийняття довільного кадру.

`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.

Очікуйте `source_loaded`; Begin crop → Apply crop, за потреби використовуйте Rotate або Undo. При явному збереженні Export image.

Лише на `export_completed` використовуйте `output_uri`, `output_width`, `output_height` та `output_mime` як вхідні дані у вашому процесі завантаження файлів. Після цього збережіть його постійне посилання у Профілі.

Якщо користувач скасовує або спрацьовує `editor_error`, залиште старий аватар. Очистіть сесію при зміні облікового запису, щоб інший користувач не міг бачити чернетку.

Редагування створює локальну копію. Ваш застосунок визначає, як її зберегти чи завантажити.

Фото каталогу

Різне кадрування та надмірно великі зображення роблять каталог нерівномірним і збільшують розмір завантаження.

`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` та `export_quality` походять з вашої політики завантаження.

Обріжте відповідну ділянку, за потреби Resize, потім Export image після підтвердження користувачем. Зберігайте оригінальний файл/посилання окремо.

Перевірте `output_width`, `output_height`, `output_bytes` та `output_mime` перед тим, як ваш процес завантаження збереже результат. Збережіть посилання на отримане зображення в елементі.

Якщо експорт не вдається або результат порушує вашу політику завантаження, покажіть `error_code` і дайте користувачеві можливість його виправити. Не перезаписуйте попереднє зображення елементу до підтвердження завантаження.

Редагування створює локальну копію. Ваш застосунок визначає, як її зберегти чи завантажити.

Фото для виїзного звіту

Технік може потребувати крупний план однієї пошкодженої частини, зберігаючи оригінальне зображення звіту.

`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; співвідношення кадру може залишатися незмінним.

Begin crop → Apply crop, потім використайте Undo/Redo для порівняння правок. Export image створює відредаговану копію; ваш застосунок запитує, чи прикріпити цю копію до Звіту.

Використайте `has_changes`, `can_undo`, `can_redo` та `output_uri`. Після успішного завантаження збережіть оригінальні та відредаговані посилання у окремих полях застосунку.

Cancel crop або Reset edits відновлює шлях редагування; скасування повинно залишити оригінальне вкладення Звіту без змін.

Редагування створює локальну копію. Ваш застосунок визначає, як її зберегти чи завантажити.

Що працює зараз

Публічна бета-версія. Використовуйте описані елементи керування й дії; перевірте формати, дозволи та поведінку у своєму нативному застосунку. Вебпрев’ю не перевіряє результат на пристрої.

Побудуйте бізнес-процес

Використовуйте доступні бета-дії нижче й перевіряйте результат на потрібних пристроях.

У прикладах є записи Lesson, Message та Order. Замініть їх на власні типи даних і назви елементів. Замість адрес із прикладів підставте власні файли.

Укажіть вибране зображення в source_url. document_context визначає акаунт і запис, який редагують, щоб під час зміни запису попереднє фото очищувалося.
Після source_loaded виконайте Begin crop. Для аватара оберіть 1:1, налаштуйте рамку й натисніть Apply crop. Cancel crop залишає зображення без змін.
За потреби використовуйте Rotate, Flip або Resize. Undo та Redo переміщуються між завершеними змінами; Reset edits повертає оригінал.
Виконайте Export image. На export_completed прочитайте output_uri, output_width, output_height і output_mime. Збережіть або завантажте цю копію своїм файловим workflow, а потім запишіть збережений файл у потрібний запис.

Діаграма робочого процесу — не скріншот додатку · SVG

Налаштуйте один раз

Активація ключем для цього плагіна запланована. Створіть або оберіть проєкт Bubble у BestPlugins → Dashboard → Plugins. Оберіть Xodera Photo Editor Native, скопіюйте його ключ, відкрийте Bubble → Plugins → Xodera Photo Editor Native і вставте ключ у licensing_api_key. Збережіть один раз, далі використовуйте дії нижче. Для кожного плагіна в кожному проєкті є окремий ключ.

Спочатку виберіть або зробіть фото у своєму застосунку. Передайте редактору доступну адресу зображення. Дозволи на камеру й галерею налаштовуються у вашому виборі фото.

Налаштуйте один раз

Створіть або оберіть проєкт Bubble у BestPlugins → Dashboard → Plugins.
Оберіть цей плагін і скопіюйте ключ його проєкту.
Відкрийте Bubble → Plugins → цей плагін. Вставте ключ його проєкту в licensing_api_key та збережіть.
Додайте елемент, оберіть дані свого застосунку та побудуйте workflow нижче.
На панелі керування перегляньте й підтвердьте 7-денний пробний доступ із карткою для цього плагіна. Потім він коштує 1,50 USD/місяць за проєкт, включно з розробкою та робочою версією. Скасуйте до завершення пробного періоду, щоб уникнути першого списання.

Встановлення та підписка

Для Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit та Haptics: безкоштовне встановлення в Bubble, 7 днів пробного доступу з карткою, потім 1,50 USD на місяць за плагін у проєкті. Розробку й робочу версію включено, без ліміту операцій. Обмеження файлів і можливостей залишаються. Перед підтвердженням перевірте оплату й скасування. Інші плагіни недоступні для покупки.

Як записати результат у свою базу

Запишіть завантажене або постійно збережене зображення в Profile.image чи поле вкладення. output_uri — тимчасовий файл пристрою, тож спочатку збережіть його своїм workflow. Потім запишіть output_width, output_height та output_mime. Залиште оригінал, якщо потрібні обидві версії.

Помилки, скасування та відновлення

На source_load_failed або editor_error покажіть error_code і запропонуйте Load source. Після Cancel operation дочекайтеся is_busy=no перед новим редагуванням. Clear session очищує редактор, але не видаляє зображення, уже збережене окремо.

Можливості й обмеження

Експорт JPEG і PNG; якість 0–1; найбільша сторона результату 1–4096 пікселів. Вхід: до 15 MiB і 20 мегапікселів. До 20 завершених змін. Обрізання: вільне, 1:1, 4:3, 3:4 і 16:9. Немає власної камери, фільтрів, написів, корекції перспективи, експорту WebP або автоматичного завантаження.

Налаштування, дії та результати

Використовуйте ці назви в Bubble. Плановані функції позначені окремо.

Доступні бета‑налаштування

Налаштування елемента

source_url · textdocument_context · textis_active · yes_nodisabled · yes_noshow_controls · yes_nocrop_aspect · textexport_format · textexport_quality · numberexport_max_dimension · numberallow_upscale · yes_noui_text_json · textlanguage · text

Стани

editor_status · textis_busy · yes_nohas_image · yes_nohas_changes · yes_nocan_undo · yes_nocan_redo · yes_noimage_width · numberimage_height · numberoutput_uri · textoutput_width · numberoutput_height · numberoutput_bytes · numberoutput_mime · texterror_code · textcrop_active · yes_nocrop_rect_json · text

Події

source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_error

Дії та їхні параметри

Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear session

Налаштування елемента · 12

source_urltext · Типове значення: "": Приклад значенняhttps://bestplugins.online/native-samples/avatar.jpg; Приклад виразу BubbleSelected Profile's image_url; Адреса вибраного аудіо, відео або зображення. Використовуйте тип файлу, який підтримує цей плагін.

document_contexttext · Типове значення: "": Приклад значення<current-user-id>; Приклад виразу BubbleCurrent User's unique id; Стале значення цього акаунта чи запису. Використовуйте його ж для відновлення файлів або чернеток.

is_activeyes_no · Типове значення: true: Приклад значенняyes; Приклад виразу BubbleGuideHost's view_is_active (your yes/no custom state); yes, доки ця сторінка відкрита; no під час виходу, щоб зупинити відтворення чи поточну дію.

disabledyes_no · Типове значення: false: Приклад значенняno; Приклад виразу BubbleGuideHost's is_busy (your yes/no custom state); Вимкніть елемент, коли застосунок зайнятий або дія недоступна.

show_controlsyes_no · Типове значення: true: Приклад значенняyes; Приклад виразу BubbleApp Settings' show_editor_controls; Показати або приховати вбудовані кнопки.

crop_aspecttext · Типове значення: "free": Приклад значення1:1; Приклад виразу BubbleAvatar Settings' crop_ratio; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

export_formattext · Типове значення: "jpeg": Приклад значенняjpeg; Приклад виразу BubbleFormat Dropdown's value; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

export_qualitynumber · Типове значення: 0.85: Приклад значення0.85; Приклад виразу BubbleImage Settings' quality; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

export_max_dimensionnumber · Типове значення: 2048: Приклад значення2048; Приклад виразу BubbleImage Settings' max_side; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

allow_upscaleyes_no · Типове значення: false: Приклад значенняno; Приклад виразу BubbleAllow upscale Checkbox is checked; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

ui_text_jsontext · Типове значення: "": Приклад значення{}; Приклад виразу BubbleApp Settings' player_labels_json (supported keys only); Необов’язковий JSON із підтримуваними підписами кнопок. Залиште порожнім для вбудованих текстів.

languagetext · Типове значення: "auto": Приклад значенняuk; Приклад виразу BubbleCurrent User's preferred_language; Укажіть language=auto, щоб автоматично використати підтримувану мову пристрою або браузера. Щоб обрати мову явно, укажіть підтримуваний код мови.

Дії та їхні параметри · 13

Load source

Немає параметрів дії

Begin crop

Немає параметрів дії

Apply crop

origin_xnumber · Типове значення: —: Приклад значення0; Приклад виразу BubbleCrop Settings' x (or omit all rectangle inputs); Візьміть значення поточного бізнес-запису й перевірте межі нижче.

origin_ynumber · Типове значення: —: Приклад значення0; Приклад виразу BubbleCrop Settings' y (or omit all rectangle inputs); Візьміть значення поточного бізнес-запису й перевірте межі нижче.

widthnumber · Типове значення: —: Приклад значення512; Приклад виразу BubbleResize Width Input's value:converted to number; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

heightnumber · Типове значення: —: Приклад значення512; Приклад виразу BubbleResize Height Input's value:converted to number; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

Cancel crop

Немає параметрів дії

Rotate

degreesnumber · Типове значення: —: Приклад значення90; Приклад виразу BubbleRotation Dropdown's value; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

Flip

axistext · Типове значення: —: Приклад значенняhorizontal; Приклад виразу BubbleFlip Direction Dropdown's value; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

Resize

widthnumber · Типове значення: —: Приклад значення512; Приклад виразу BubbleResize Width Input's value:converted to number; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

heightnumber · Типове значення: —: Приклад значення512; Приклад виразу BubbleResize Height Input's value:converted to number; Візьміть значення поточного бізнес-запису й перевірте межі нижче.

Undo

Немає параметрів дії

Redo

Немає параметрів дії

Reset edits

Немає параметрів дії

Export image

Немає параметрів дії

Cancel operation

Немає параметрів дії

Clear session

Немає параметрів дії

Стани та події

Стани

editor_status · text

Поточний результат дії. Перед записом успіху дочекайтеся відповідної події завершення.

is_busy · yes_no

Дія ще триває. Дочекайтеся завершення перед іншою дією.

has_image · yes_no