Xodera Plugins · Bubble Native
Xodera Photo Editor Native
Verwandeln Sie ein ausgewähltes Foto in ein einheitliches Avatar, Produktbild oder Bericht‑Anhang. Schneiden Sie es zu, drehen und skalieren Sie es, und speichern Sie dann die exportierte Kopie in Ihrer App.
Public beta guides · Haptics instructions are in its Bubble listing
Public beta offer: free Bubble install · 7-day card trial, then US$1.50/month per plugin/project.
Dokumentation geprüft 6 November 2026
Praktische Beispiele
Konsistente Profil‑Avatare vor dem Hochladen
Benutzer sollten auswählen, welcher Teil ihres Fotos in einem quadratischen Profilbild angezeigt wird, anstatt einen beliebigen Zuschnitt zu akzeptieren.
`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.
Warten Sie auf `source_loaded`; Begin crop → Apply crop, bei Bedarf mit Rotate oder Undo. Bei explizitem Speichern Export image.
Nur bei `export_completed` verwenden Sie `output_uri`, `output_width`, `output_height` und `output_mime` als Eingaben für Ihren Datei‑Upload‑Ablauf. Speichern Sie anschließend die dauerhafte Referenz im Profil.
Wenn der Benutzer abbricht oder `editor_error` ausgelöst wird, behalten Sie den alten Avatar. Löschen Sie die Sitzung bei Kontowechsel, damit ein anderer Benutzer den Entwurf nicht sehen kann.
Beim Bearbeiten wird eine lokale Kopie erstellt. Ihre App entscheidet, wie sie gespeichert oder hochgeladen wird.
Erstellen Sie konsistente Marktplatz‑ oder Katalogfotos
Unterschiedliche Bildausschnitte und übergroße Bilder führen zu einem unausgewogenen Katalog und erhöhen die Upload‑Größe.
`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` und `export_quality` stammen aus Ihrer Upload‑Richtlinie.
Schneiden Sie den relevanten Bereich zu, optional Resize, und führen Sie anschließend Export image nach Bestätigung durch den Benutzer aus. Bewahren Sie die Originaldatei/Referenz separat auf.
Überprüfen Sie `output_width`, `output_height`, `output_bytes` und `output_mime`, bevor Ihr Upload‑Ablauf das Ergebnis speichert. Speichern Sie die resultierende Bildreferenz beim Artikel.
Wenn der Export fehlschlägt oder das Ergebnis gegen Ihre Upload‑Richtlinie verstößt, zeigen Sie `error_code` an und lassen Sie den Benutzer es überarbeiten. Überschreiben Sie das vorherige Item‑Bild nicht vor der Upload‑Bestätigung.
Beim Bearbeiten wird eine lokale Kopie erstellt. Ihre App entscheidet, wie sie gespeichert oder hochgeladen wird.
Erstellen Sie eine fokussierte Bildkopie für einen Feldbericht
Ein Techniker benötigt möglicherweise eine Nahaufnahme eines beschädigten Teils, wobei das ursprüngliche Bericht‑Bild erhalten bleibt.
`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; Das Zuschneideverhältnis kann unbegrenzt bleiben.
Begin crop → Apply crop, dann verwenden Sie Undo/Redo, um Änderungen zu vergleichen. Export image erstellt die bearbeitete Kopie; Ihre App fragt, ob diese Kopie an den Bericht angehängt werden soll.
Verwenden Sie `has_changes`, `can_undo`, `can_redo` und `output_uri`. Speichern Sie Original‑ und bearbeitete Referenzen in separaten App‑Feldern nach einem erfolgreichen Upload.
Cancel crop oder Reset edits stellt den Bearbeitungsweg wieder her; eine Abbruchaktion muss die ursprüngliche Bericht‑Anlage unverändert lassen.
Beim Bearbeiten wird eine lokale Kopie erstellt. Ihre App entscheidet, wie sie gespeichert oder hochgeladen wird.
Was jetzt funktioniert
Public beta. Use the documented controls and actions; test supported formats, permissions and device behavior in your own native app. Browser preview does not validate native device output.
Workflow erstellen
Verwenden Sie die unten verfügbaren Beta‑Aktionen und testen Sie das Ergebnis auf Ihren Zielgeräten.
Diese Beispiele verwenden App‑Datensätze wie Lesson, Message und Order. Ersetzen Sie sie durch Ihre eigenen Datentypen und Elementnamen. Beispiel‑Medienadressen müssen durch Ihre eigenen Dateien ersetzt werden.
Legen Sie source_url auf das ausgewählte Bild fest. Verwenden Sie document_context, um das Konto und den zu bearbeitenden Datensatz zu identifizieren, sodass das Ändern des Datensatzes das vorherige Foto löscht.
Nach source_loaded führen Sie Begin crop aus. Wählen Sie 1:1 für einen Avatar, passen Sie den Zuschnitt an und verwenden Sie Apply crop. Cancel crop lässt das Bild unverändert.
Verwenden Sie Rotate, Flip oder Resize bei Bedarf. Undo und Redo navigieren durch abgeschlossene Bearbeitungen; Reset edits stellt das Originalbild wieder her.
Führen Sie Export image aus. Auf export_completed lesen Sie output_uri, output_width, output_height und output_mime. Speichern oder laden Sie diese Kopie mit Ihrem gewählten Dateispeicher‑Workflow hoch, und speichern Sie die Datei anschließend im Datensatz.
Einmal konfigurieren
Die Schlüsselaktivierung ist für dieses Plugin geplant. Erstellen oder wählen Sie Ihr Bubble‑App‑Projekt in BestPlugins → Dashboard → Plugins. Wählen Sie Xodera Photo Editor Native, kopieren Sie dessen Schlüssel und öffnen Sie dann Bubble → Plugins → Xodera Photo Editor Native, um ihn in licensing_api_key einzufügen. Speichern Sie einmal; verwenden Sie anschließend die untenstehenden Aktionen. Jedes Plugin in jedem Projekt hat einen eigenen Schlüssel.
Wählen Sie das Bild zuerst mit Ihrer App aus oder erfassen Sie es. Geben Sie dem Editor die daraus resultierende lesbare Bildadresse. Kamera‑ und Fotobibliothek‑Berechtigungen gehören zum von Ihnen genutzten Picker.
Einmal konfigurieren
- Erstellen oder wählen Sie Ihr Bubble‑App‑Projekt bei BestPlugins → Dashboard → Plugins.
- Wählen Sie dieses Plugin aus und kopieren Sie dessen Projektschlüssel.
- Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
- Fügen Sie das Element hinzu, wählen Sie Ihre App‑Daten und erstellen Sie den untenstehenden Workflow.
- In the dashboard, review and confirm the 7-day card trial for this plugin. It then costs US$1.50/month per app project, including development and production. Cancel before the trial ends to avoid the first charge.
Installation und Abonnement
For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.
Speichern Sie das Ergebnis in Ihrer App
Speichern Sie das hochgeladene oder dauerhaft gespeicherte Bild in Profile.image oder Ihrem Anhangsfeld. output_uri ist eine temporäre Datei auf dem Gerät, daher speichern Sie diese Datei zunächst mit Ihrem gewählten Workflow. Anschließend speichern Sie output_width, output_height und output_mime als Metadaten. Bewahren Sie das Originalbild auf, wenn Sie beide Versionen benötigen.
Fehler, Abbruch und Wiederherstellung
Bei source_load_failed oder editor_error zeigen Sie error_code an und bieten Load source an. Cancel operation stoppt die Annahme des unfertigen Ergebnisses; warten Sie bis is_busy=no, bevor Sie eine weitere Bearbeitung starten. Clear session löscht den Editor, nicht ein bereits anderweitig gespeichertes Bild.
Funktionen und Grenzen
JPEG‑ und PNG‑Export; Qualität 0–1; maximale Ausgabeseite 1–4096 Pixel. Eingabe: bis zu 15 MiB und 20 Megapixel. Bis zu 20 abgeschlossene Bearbeitungen. Zuschneideoptionen: frei, 1:1, 4:3, 3:4 und 16:9. Keine integrierte Kamera, Filter, Textüberlagerungen, Perspektivkorrektur, WebP‑Export oder automatischer Upload.
Einstellungen, Aktionen und Ergebnisse
Verwenden Sie diese Namen in Bubble. Geplante Funktionen sind separat gekennzeichnet.
Verfügbare Beta‑Einstellungen
Elementeinstellungen
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 · textZustände
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 · textEreignisse
source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_errorAktionen und deren Eingaben
Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear sessionElementeinstellungen · 12
source_urltext · Standard: ""- Beispielwert
https://bestplugins.online/native-samples/avatar.jpg - Beispiel Bubble Ausdruck
Selected Profile's image_url - Adresse der ausgewählten Audio-, Video- oder Bilddatei. Verwenden Sie einen Dateityp, den dieses Plugin unterstützt.
document_contexttext · Standard: ""- Beispielwert
<current-user-id> - Beispiel Bubble Ausdruck
Current User's unique id - Stabiler Wert für dieses Konto oder diesen Datensatz. Verwenden Sie denselben Wert beim Wiederherstellen seiner gespeicherten Dateien oder Entwürfe.
is_activeyes_no · Standard: true- Beispielwert
yes - Beispiel Bubble Ausdruck
GuideHost's view_is_active (your yes/no custom state) - Setzen Sie ja, solange diese Ansicht geöffnet ist. Setzen Sie nein beim Verlassen, damit die Wiedergabe oder die aktuelle Arbeit gestoppt werden kann.
disabledyes_no · Standard: false- Beispielwert
no - Beispiel Bubble Ausdruck
GuideHost's is_busy (your yes/no custom state) - Deaktivieren Sie das Element, solange Ihre App beschäftigt ist oder diese Aktion nicht verfügbar ist.
show_controlsyes_no · Standard: true- Beispielwert
yes - Beispiel Bubble Ausdruck
App Settings' show_editor_controls - Ein- oder Ausblenden der integrierten Steuerelemente.
crop_aspecttext · Standard: "free"- Beispielwert
1:1 - Beispiel Bubble Ausdruck
Avatar Settings' crop_ratio - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
export_formattext · Standard: "jpeg"- Beispielwert
jpeg - Beispiel Bubble Ausdruck
Format Dropdown's value - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
export_qualitynumber · Standard: 0.85- Beispielwert
0.85 - Beispiel Bubble Ausdruck
Image Settings' quality - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
export_max_dimensionnumber · Standard: 2048- Beispielwert
2048 - Beispiel Bubble Ausdruck
Image Settings' max_side - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
allow_upscaleyes_no · Standard: false- Beispielwert
no - Beispiel Bubble Ausdruck
Allow upscale Checkbox is checked - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
ui_text_jsontext · Standard: ""- Beispielwert
{} - Beispiel Bubble Ausdruck
App Settings' player_labels_json (supported keys only) - Optionales JSON mit unterstützten Schaltflächenbeschriftungen. Leer lassen, um den integrierten Text zu verwenden.
languagetext · Standard: "auto"- Beispielwert
uk - Beispiel Bubble Ausdruck
Current User's preferred_language - Setzen Sie language=auto, um einer unterstützten Geräte‑ oder Browsersprache zu folgen. Geben Sie einen unterstützten Sprachcode ein, um ihn ausdrücklich auszuwählen.
Aktionen und deren Eingaben · 13
Load source
Keine Aktionsparameter
Begin crop
Keine Aktionsparameter
Apply crop
origin_xnumber · Standard: —- Beispielwert
0 - Beispiel Bubble Ausdruck
Crop Settings' x (or omit all rectangle inputs) - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
origin_ynumber · Standard: —- Beispielwert
0 - Beispiel Bubble Ausdruck
Crop Settings' y (or omit all rectangle inputs) - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
widthnumber · Standard: —- Beispielwert
512 - Beispiel Bubble Ausdruck
Resize Width Input's value:converted to number - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
heightnumber · Standard: —- Beispielwert
512 - Beispiel Bubble Ausdruck
Resize Height Input's value:converted to number - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
Cancel crop
Keine Aktionsparameter
Rotate
degreesnumber · Standard: —- Beispielwert
90 - Beispiel Bubble Ausdruck
Rotation Dropdown's value - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
Flip
axistext · Standard: —- Beispielwert
horizontal - Beispiel Bubble Ausdruck
Flip Direction Dropdown's value - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
Resize
widthnumber · Standard: —- Beispielwert
512 - Beispiel Bubble Ausdruck
Resize Width Input's value:converted to number - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
heightnumber · Standard: —- Beispielwert
512 - Beispiel Bubble Ausdruck
Resize Height Input's value:converted to number - Verwenden Sie den Wert des aktuellen Geschäftsdatensatzes; prüfen Sie ihn anhand der untenstehenden Grenzen.
Undo
Keine Aktionsparameter
Redo
Keine Aktionsparameter
Reset edits
Keine Aktionsparameter
Export image
Keine Aktionsparameter
Cancel operation
Keine Aktionsparameter
Clear session
Keine Aktionsparameter
Zustände und Ereignisse
Zustände
editor_status · textAktuelles Ergebnis dieser Aktion. Verwenden Sie das passende Abschlussereignis, bevor Sie den Erfolg speichern.
is_busy · yes_noDie Arbeit ist noch im Gange. Bitte warten Sie, bevor Sie eine weitere Aktion starten.
has_image · yes_noAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
has_changes · yes_noAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
can_undo · yes_noAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
can_redo · yes_noAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
image_width · numberAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
image_height · numberAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
output_uri · textDateistandort auf diesem Gerät. Speichern oder laden Sie die Datei separat hoch, wenn sie online behalten werden muss.
output_width · numberAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
output_height · numberAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
output_bytes · numberAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
output_mime · textAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
error_code · textFehlermeldung für die letzte Aktion. Zeigen Sie eine hilfreiche Nachricht an und bieten Sie den entsprechenden Wiederholungsversuch an.
crop_active · yes_noAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
crop_rect_json · textAktueller Wert für das ausgewählte Element. Lesen Sie ihn nach dem zugehörigen Ereignis.
Ereignisse
source_loadedWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
source_load_failedWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
edit_appliedWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
edit_undoneWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
edit_redoneWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
editor_resetWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
export_startedWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
export_completedWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
operation_cancelledWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
editor_errorWenn dieses Ereignis eintritt, lesen Sie die zugehörigen Zustände aus demselben Element.
Fragen, die Entwickler stellen
Ist output_uri eine Bubble‑Datei?
Nein. Es ist ein lokaler Cache‑Pfad. Bewahren Sie ihn über einen bewährten lokalen Speicherer oder Uploader auf, bevor Sie eine Cloud‑Dateireferenz speichern.
Wie funktioniert das Abonnement?
For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.
Verwandte Anleitungen
Für Hilfe geben Sie an, welches Plugin und Gerät Sie verwenden, welche Aktion Sie versucht haben und was passiert ist. Verwenden Sie ein Beispiel ohne persönliche Daten. Teilen Sie niemals Ihren Schlüssel oder private Dateien.