Xodera Plugins · Bubble Native
Xodera Photo Editor Native
Omvandla ett valt foto till en enhetlig avatar, produktbild eller rapportbilaga. Beskär, rotera och ändra storlek, och spara sedan den exporterade kopian i din 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 granskad 6 november 2026
Praktiska exempel
Konsekventa profilavatarer före uppladdning
Användare bör välja vilken del av deras foto som visas i en fyrkantig profilbild istället för att acceptera en godtycklig beskärning.
`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.
Vänta på `source_loaded`; Begin crop → Apply crop, med Rotate eller Undo efter behov. Vid uttrycklig Spara, Export image.
Endast på `export_completed`, använd `output_uri`, `output_width`, `output_height` och `output_mime` som indata i ditt filuppladdningsflöde. Spara dess beständiga referens till profilen därefter.
Om användaren avbryter eller `editor_error` utlöses, behåll den gamla avataren. Rensa sessionen vid kontobyte så att en annan användare inte kan se utkastet.
Redigering skapar en lokal kopia. Din app väljer hur den ska sparas eller laddas upp.
Förbered konsekventa marknadsplats‑ eller katalogfoton
Olika inramning och överdimensionerade bilder gör en katalog ojämn och ökar uppladdningsstorleken.
`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` och `export_quality` kommer från din uppladdningspolicy.
Beskär det relevanta området, eventuellt Resize, och sedan Export image efter att användaren bekräftat. Behåll den ursprungliga filen/referensen separat.
Kontrollera `output_width`, `output_height`, `output_bytes` och `output_mime` innan ditt uppladdningsflöde sparar resultatet. Lagra den resulterande bildreferensen på objektet.
Om export misslyckas eller resultatet bryter mot din uppladdningspolicy, visa `error_code` och låt användaren revidera det. Skriv inte över den tidigare objektbilden innan uppladdningsbekräftelse.
Redigering skapar en lokal kopia. Din app väljer hur den ska sparas eller laddas upp.
Skapa en fokuserad bildkopia för en fältrapport
En tekniker kan behöva en närbild av en skadad del samtidigt som den ursprungliga rapportbilden bevaras.
`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; beskärningsförhållandet kan förbli obegränsat.
Begin crop → Apply crop, använd sedan Undo/Redo för att jämföra redigeringar. Export image skapar den redigerade kopian; din app frågar om den ska bifogas till rapporten.
Använd `has_changes`, `can_undo`, `can_redo` och `output_uri`. Lagra original‑ och redigerade referenser i separata appfält efter en lyckad uppladdning.
Cancel crop eller Reset edits återställer redigeringsvägen; avbrytning måste lämna den ursprungliga Rapport‑bilagan oförändrad.
Redigering skapar en lokal kopia. Din app väljer hur den ska sparas eller laddas upp.
Vad som fungerar nu
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.
Bygg arbetsflödet
Använd de tillgängliga betahandlingarna nedan och testa resultatet på dina mål enheter.
Dessa exempel använder app‑poster såsom Lesson, Message och Order. Ersätt dem med dina egna datatyper och elementnamn. Exempel på mediadresser måste ersättas med dina egna filer.
Ställ in source_url till den valda bilden. Använd document_context för att identifiera kontot och posten som redigeras, så att ändring av posten rensar föregående foto.
Efter source_loaded, kör Begin crop. Välj 1:1 för en avatar, justera beskärningen och använd Apply crop. Cancel crop lämnar bilden oförändrad.
Använd Rotate, Flip eller Resize om behövs. Undo och Redo navigerar genom slutförda redigeringar; Reset edits återställer originalbilden.
Kör Export image. På export_completed, läs output_uri, output_width och output_height samt output_mime. Spara eller ladda upp den kopian med ditt valda fil‑sparande arbetsflöde, och lagra sedan den sparade filen i posten.
Konfigurera en gång
Nyckelaktivering är planerad för detta plugin. Skapa eller välj ditt Bubble‑appprojekt i BestPlugins → Dashboard → Plugins. Välj Xodera Photo Editor Native, kopiera dess nyckel, öppna sedan Bubble → Plugins → Xodera Photo Editor Native och klistra in den i licensing_api_key. Spara en gång; använd sedan åtgärderna nedan. Varje plugin i varje projekt har sin egen nyckel.
Välj eller fånga bilden med din app först. Ge redigeraren den resulterande läsbara bildadressen. Kamera- och fotobiblioteksbehörigheter tillhör den väljare du använder.
Konfigurera en gång
- Skapa eller välj ditt Bubble‑appprojekt på BestPlugins → Dashboard → Plugins.
- Välj detta plugin och kopiera dess projektnyckel.
- Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
- Lägg till elementet, välj dina appdata och bygg arbetsflödet nedan.
- 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 och prenumeration
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.
Spara resultatet i din app
Spara den uppladdade eller permanent sparade bilden i Profile.image eller ditt bifogade fält. output_uri är en tillfällig fil på enheten, så spara först den filen med ditt valda arbetsflöde. Spara sedan output_width, output_height och output_mime som metadata. Behåll originalbilden om du behöver båda versionerna.
Fel, avbryt och återställning
På source_load_failed eller editor_error, visa error_code och erbjud Load source. Cancel operation slutar acceptera det ofullständiga resultatet; vänta tills is_busy=no innan du påbörjar en ny redigering. Clear session rensar redigeraren, inte en bild som redan sparats någon annanstans.
Kapaciteter och begränsningar
JPEG och PNG export; kvalitet 0–1; maximal sidlängd för den exporterade bilden: 1–4096 pixlar. Inmatning: upp till 15 MiB och 20 megapixlar. Upp till 20 slutförda redigeringar. Beskärningsalternativ: fri, 1:1, 4:3, 3:4 och 16:9. Ingen inbyggd kamera, filter, textöverlägg, perspektivkorrigering, WebP‑export eller automatisk uppladdning.
Inställningar, åtgärder och resultat
Använd dessa namn i Bubble. Planerade funktioner markeras separat.
Tillgängliga beta-inställningar
Elementinställningar
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 · textTillstånd
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 · textHändelser
source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_errorÅtgärder och deras indata
Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear sessionElementinställningar · 12
source_urltext · Standard: ""- Exempelvärde
https://bestplugins.online/native-samples/avatar.jpg - Exempel Bubble uttryck
Selected Profile's image_url - Adress till den valda ljud-, video- eller bildfilen. Använd en filtyp som detta plugin stödjer.
document_contexttext · Standard: ""- Exempelvärde
<current-user-id> - Exempel Bubble uttryck
Current User's unique id - Stabilt värde för detta konto eller post. Använd samma värde när du återställer dess sparade filer eller utkast.
is_activeyes_no · Standard: true- Exempelvärde
yes - Exempel Bubble uttryck
GuideHost's view_is_active (your yes/no custom state) - Sätt ja medan denna vy är öppen. Sätt nej vid lämning, så uppspelning eller pågående arbete kan stoppas.
disabledyes_no · Standard: false- Exempelvärde
no - Exempel Bubble uttryck
GuideHost's is_busy (your yes/no custom state) - Inaktivera elementet medan din app är upptagen eller åtgärden är otillgänglig.
show_controlsyes_no · Standard: true- Exempelvärde
yes - Exempel Bubble uttryck
App Settings' show_editor_controls - Visa eller dölj de inbyggda kontrollerna.
crop_aspecttext · Standard: "free"- Exempelvärde
1:1 - Exempel Bubble uttryck
Avatar Settings' crop_ratio - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
export_formattext · Standard: "jpeg"- Exempelvärde
jpeg - Exempel Bubble uttryck
Format Dropdown's value - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
export_qualitynumber · Standard: 0.85- Exempelvärde
0.85 - Exempel Bubble uttryck
Image Settings' quality - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
export_max_dimensionnumber · Standard: 2048- Exempelvärde
2048 - Exempel Bubble uttryck
Image Settings' max_side - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
allow_upscaleyes_no · Standard: false- Exempelvärde
no - Exempel Bubble uttryck
Allow upscale Checkbox is checked - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
ui_text_jsontext · Standard: ""- Exempelvärde
{} - Exempel Bubble uttryck
App Settings' player_labels_json (supported keys only) - Valfri JSON med stöd för knappetiketter. Lämna tomt för att använda den inbyggda texten.
languagetext · Standard: "auto"- Exempelvärde
uk - Exempel Bubble uttryck
Current User's preferred_language - Ställ in language=auto för att följa en stödjande enhet eller webbläsarspråk. Ange en stödjande språkkod för att välja den explicit.
Åtgärder och deras indata · 13
Load source
Inga åtgärdsparametrar
Begin crop
Inga åtgärdsparametrar
Apply crop
origin_xnumber · Standard: —- Exempelvärde
0 - Exempel Bubble uttryck
Crop Settings' x (or omit all rectangle inputs) - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
origin_ynumber · Standard: —- Exempelvärde
0 - Exempel Bubble uttryck
Crop Settings' y (or omit all rectangle inputs) - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
widthnumber · Standard: —- Exempelvärde
512 - Exempel Bubble uttryck
Resize Width Input's value:converted to number - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
heightnumber · Standard: —- Exempelvärde
512 - Exempel Bubble uttryck
Resize Height Input's value:converted to number - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
Cancel crop
Inga åtgärdsparametrar
Rotate
degreesnumber · Standard: —- Exempelvärde
90 - Exempel Bubble uttryck
Rotation Dropdown's value - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
Flip
axistext · Standard: —- Exempelvärde
horizontal - Exempel Bubble uttryck
Flip Direction Dropdown's value - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
Resize
widthnumber · Standard: —- Exempelvärde
512 - Exempel Bubble uttryck
Resize Width Input's value:converted to number - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
heightnumber · Standard: —- Exempelvärde
512 - Exempel Bubble uttryck
Resize Height Input's value:converted to number - Använd det aktuella affärspostens värde; validera det mot gränserna nedan.
Undo
Inga åtgärdsparametrar
Redo
Inga åtgärdsparametrar
Reset edits
Inga åtgärdsparametrar
Export image
Inga åtgärdsparametrar
Cancel operation
Inga åtgärdsparametrar
Clear session
Inga åtgärdsparametrar
Tillstånd och händelser
Tillstånd
editor_status · textAktuellt resultat av denna åtgärd. Använd motsvarande slutförande‑händelse innan du sparar framgång.
is_busy · yes_noArbetet pågår fortfarande. Vänta innan du påbörjar en annan åtgärd.
has_image · yes_noAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
has_changes · yes_noAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
can_undo · yes_noAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
can_redo · yes_noAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
image_width · numberAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
image_height · numberAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
output_uri · textFilplats på den här enheten. Spara eller ladda upp filen separat om den måste hållas online.
output_width · numberAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
output_height · numberAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
output_bytes · numberAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
output_mime · textAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
error_code · textFelinformation för den senaste åtgärden. Visa ett hjälpsamt meddelande och erbjud relevant återförsök.
crop_active · yes_noAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
crop_rect_json · textAktuellt värde för det valda objektet. Läs det efter den relaterade händelsen.
Händelser
source_loadedNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
source_load_failedNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
edit_appliedNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
edit_undoneNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
edit_redoneNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
editor_resetNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
export_startedNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
export_completedNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
operation_cancelledNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
editor_errorNär denna händelse inträffar, läs de relaterade tillstånden från samma element.
Frågor som utvecklare ställer
Är output_uri en Bubble‑fil?
Nej. Det är en lokal cache‑sökväg. Behåll den via en beprövad lokal sparare eller uppladdare innan du lagrar en molnfilreferens.
Hur fungerar prenumerationen?
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.
Relaterade guider
För hjälp, berätta vilken plugin och enhet du använder, vilken åtgärd du försökte och vad som hände. Använd ett exempel utan personuppgifter. Dela aldrig din nyckel eller privata filer.