Xodera Plugins · Bubble Native
Xodera Photo Editor Native
Convertiu una foto seleccionada en un avatar, imatge de producte o adjunt d'informe coherent. Retalleu-la, gireu-la i canvieu-ne la mida, i després deseu la còpia exportada a la vostra aplicació.
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.
Documentació revisada 6 novembre 2026
Exemples pràctics
Avatars de perfil coherents abans de pujar
Els usuaris haurien de triar quina part de la seva foto apareix en una imatge de perfil quadrada en lloc d'acceptar un retall arbitrari.
`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.
Espereu `source_loaded`; Begin crop → Apply crop, amb Rotate o Undo segons calgui. En desar explícitament, Export image.
Només a `export_completed`, utilitzeu `output_uri`, `output_width`, `output_height` i `output_mime` com a entrades al vostre flux de càrrega d'arxius. Deseu la seva referència duradora al Perfil posteriorment.
Si l'usuari cancel·la o `editor_error` s'activa, manteniu l'avatar antic. Esborreu la sessió en canviar de compte perquè un altre usuari no pugui veure l'esborrany.
L'edició crea una còpia local. La vostra aplicació decideix com desar-la o pujar-la.
Prepareu fotos de mercat o catàleg coherents
Un marc diferent i imatges sobredimensionades fan que el catàleg sigui irregular i augmenten la mida de la càrrega.
`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` i `export_quality` provenen de la vostra política de càrrega.
Retalleu l'àrea rellevant, opcionalment Resize, i després Export image després que l'usuari ho confirmi. Mantingueu l'arxiu/referència original per separat.
Comproveu `output_width`, `output_height`, `output_bytes` i `output_mime` abans que el vostre flux de càrrega desi el resultat. Emmagatzemeu la referència de la imatge resultant a l'Element.
Si l'exportació falla o el resultat viola la vostra política de càrrega, mostreu `error_code` i deixeu que l'usuari el corregeixi. No sobreescriviu la imatge anterior de l'Element abans de la confirmació de la càrrega.
L'edició crea una còpia local. La vostra aplicació decideix com desar-la o pujar-la.
Creeu una còpia d'imatge enfocada per a un informe de camp
Un tècnic pot necessitar un primer pla d'una part danyada mantenint la imatge original de l'informe.
`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; la proporció de retall pot quedar sense restriccions.
Begin crop → Apply crop, després utilitzeu Undo/Redo per comparar les edicions. Export image crea la còpia editada; la vostra aplicació pregunta si s'ha d'adjuntar aquesta còpia a l'Informe.
Utilitzeu `has_changes`, `can_undo`, `can_redo` i `output_uri`. Emmagatzemeu les referències originals i editades en camps d'aplicació separats després d'una càrrega exitosa.
Cancel crop o Reset edits restaura el camí d'edició; la cancel·lació ha de deixar l'adjunt del Report original sense canvis.
L'edició crea una còpia local. La vostra aplicació decideix com desar-la o pujar-la.
Què funciona ara
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.
Crea el flux de treball
Utilitzeu les accions beta disponibles a continuació i proveu el resultat en els vostres dispositius de destinació.
Aquests exemples utilitzen registres d'aplicació com Lesson, Message i Order. Substituïu-los amb els vostres propis tipus de dades i noms d'elements. Les adreces multimèdia d'exemple s'han de substituir per els vostres propis fitxers.
Establiu source_url a la imatge seleccionada. Utilitzeu document_context per identificar el compte i el registre que s'està editant, de manera que canviar el registre esborra la foto anterior.
Després de source_loaded, executeu Begin crop. Trieu 1:1 per a un avatar, ajusteu el retall i utilitzeu Apply crop. Cancel crop deixa la imatge sense canvis.
Utilitzeu Rotate, Flip o Resize si cal. Undo i Redo avancen a través de les edicions completades; Reset edits restaura la imatge original.
Executeu Export image. A export_completed, llegiu output_uri, output_width, output_height i output_mime. Deseu o pugeu aquesta còpia amb el flux de treball de desament de fitxers que hàgiu triat, i després emmagatzemeu l'arxiu desat al registre.
Configura una vegada
L'activació de la clau està prevista per a aquest connector. Creeu o trieu el vostre projecte d'aplicació Bubble a BestPlugins → Dashboard → Plugins. Trieu Xodera Photo Editor Native, copieu la seva clau, després obriu Bubble → Plugins → Xodera Photo Editor Native i enganxeu‑la a licensing_api_key. Deseu una vegada; després utilitzeu les accions següents. Cada connector a cada projecte té la seva pròpia clau.
Seleccioneu o captureu la imatge amb la vostra aplicació primer. Proporcioneu a l'editor l'adreça de la imatge llegible resultant. Els permisos de càmera i de biblioteca de fotos corresponen al selector que utilitzeu.
Configura una vegada
- Creeu o trieu el vostre projecte d’aplicació Bubble a BestPlugins → Dashboard → Plugins.
- Trieu aquest connector i copieu la clau del projecte.
- Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
- Afegiu l’element, trieu les vostres dades d’aplicació i construïu el flux de treball a continuació.
- 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.
Instal·lació i subscripció
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.
Desa el resultat a la teva aplicació
Deseu la imatge pujada o guardada permanentment a Profile.image o al vostre camp d'adjunció. output_uri és un fitxer temporal al dispositiu, de manera que primer deseu aquest fitxer amb el flux de treball escollit. A continuació, emmagatzemeu output_width, output_height i output_mime com a metadades. Conserva la imatge original si necessites ambdues versions.
Fallada, cancel·lació i recuperació
A source_load_failed o editor_error, mostreu error_code i ofereix Load source. Cancel operation deixa d'acceptar el resultat incomplet; espereu fins a is_busy=no abans de començar una altra edició. Clear session neteja l'editor, no una imatge ja desada en un altre lloc.
Capacitats i límits
Exportació JPEG i PNG; qualitat 0–1; màxim costat de sortida 1–4096 píxels. Entrada: fins a 15 MiB i 20 megapíxels. Fins a 20 edicions completades. Opcions de retall: lliure, 1:1, 4:3, 3:4 i 16:9. No hi ha càmera integrada, filtres, superposicions de text, correcció de perspectiva, exportació WebP ni pujada automàtica.
Configuracions, accions i resultats
Utilitzeu aquests noms a Bubble. Les funcions planificades es marquen per separat.
Configuracions beta disponibles
Configuració de l'element
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 · textEstats
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 · textEsdeveniments
source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_errorAccions i les seves entrades
Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear sessionConfiguració de l'element · 12
source_urltext · Per defecte: ""- Valor d'exemple
https://bestplugins.online/native-samples/avatar.jpg - Exemple d'expressió Bubble
Selected Profile's image_url - Adreça del fitxer d'àudio, vídeo o imatge seleccionat. Utilitza un tipus de fitxer compatible amb aquest connector.
document_contexttext · Per defecte: ""- Valor d'exemple
<current-user-id> - Exemple d'expressió Bubble
Current User's unique id - Valor estable per a aquest compte o registre. Utilitzeu el mateix valor en restaurar els seus fitxers o esborranys desats.
is_activeyes_no · Per defecte: true- Valor d'exemple
yes - Exemple d'expressió Bubble
GuideHost's view_is_active (your yes/no custom state) - Estableix sí mentre aquesta vista està oberta. Estableix no en sortir, perquè la reproducció o l'obra actual puguin aturar-se.
disabledyes_no · Per defecte: false- Valor d'exemple
no - Exemple d'expressió Bubble
GuideHost's is_busy (your yes/no custom state) - Desactiva l'element mentre l'aplicació està ocupada o aquesta acció no està disponible.
show_controlsyes_no · Per defecte: true- Valor d'exemple
yes - Exemple d'expressió Bubble
App Settings' show_editor_controls - Mostra o amaga els controls integrats.
crop_aspecttext · Per defecte: "free"- Valor d'exemple
1:1 - Exemple d'expressió Bubble
Avatar Settings' crop_ratio - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
export_formattext · Per defecte: "jpeg"- Valor d'exemple
jpeg - Exemple d'expressió Bubble
Format Dropdown's value - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
export_qualitynumber · Per defecte: 0.85- Valor d'exemple
0.85 - Exemple d'expressió Bubble
Image Settings' quality - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
export_max_dimensionnumber · Per defecte: 2048- Valor d'exemple
2048 - Exemple d'expressió Bubble
Image Settings' max_side - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
allow_upscaleyes_no · Per defecte: false- Valor d'exemple
no - Exemple d'expressió Bubble
Allow upscale Checkbox is checked - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
ui_text_jsontext · Per defecte: ""- Valor d'exemple
{} - Exemple d'expressió Bubble
App Settings' player_labels_json (supported keys only) - JSON opcional amb etiquetes de botó compatibles. Deixa buit per utilitzar el text integrat.
languagetext · Per defecte: "auto"- Valor d'exemple
uk - Exemple d'expressió Bubble
Current User's preferred_language - Estableix language=auto per seguir un dispositiu o idioma del navegador compatible. Introdueix un codi d'idioma compatible per seleccionar-lo explícitament.
Accions i les seves entrades · 13
Load source
Sense paràmetres d'acció
Begin crop
Sense paràmetres d'acció
Apply crop
origin_xnumber · Per defecte: —- Valor d'exemple
0 - Exemple d'expressió Bubble
Crop Settings' x (or omit all rectangle inputs) - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
origin_ynumber · Per defecte: —- Valor d'exemple
0 - Exemple d'expressió Bubble
Crop Settings' y (or omit all rectangle inputs) - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
widthnumber · Per defecte: —- Valor d'exemple
512 - Exemple d'expressió Bubble
Resize Width Input's value:converted to number - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
heightnumber · Per defecte: —- Valor d'exemple
512 - Exemple d'expressió Bubble
Resize Height Input's value:converted to number - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
Cancel crop
Sense paràmetres d'acció
Rotate
degreesnumber · Per defecte: —- Valor d'exemple
90 - Exemple d'expressió Bubble
Rotation Dropdown's value - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
Flip
axistext · Per defecte: —- Valor d'exemple
horizontal - Exemple d'expressió Bubble
Flip Direction Dropdown's value - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
Resize
widthnumber · Per defecte: —- Valor d'exemple
512 - Exemple d'expressió Bubble
Resize Width Input's value:converted to number - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
heightnumber · Per defecte: —- Valor d'exemple
512 - Exemple d'expressió Bubble
Resize Height Input's value:converted to number - Utilitza el valor del registre empresarial actual; valida'l respecte als límits següents.
Undo
Sense paràmetres d'acció
Redo
Sense paràmetres d'acció
Reset edits
Sense paràmetres d'acció
Export image
Sense paràmetres d'acció
Cancel operation
Sense paràmetres d'acció
Clear session
Sense paràmetres d'acció
Estats i esdeveniments
Estats
editor_status · textResultat actual d'aquesta acció. Utilitza l'esdeveniment de finalització coincident abans d'enregistrar l'èxit.
is_busy · yes_noLa feina encara està en curs. Espereu abans d'iniciar una altra acció.
has_image · yes_noValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
has_changes · yes_noValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
can_undo · yes_noValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
can_redo · yes_noValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
image_width · numberValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
image_height · numberValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
output_uri · textUbicació del fitxer en aquest dispositiu. Deseu o pugeu el fitxer per separat si ha de quedar en línia.
output_width · numberValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
output_height · numberValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
output_bytes · numberValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
output_mime · textValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
error_code · textInformació d'error de l'última acció. Mostra un missatge útil i ofereix el reintent corresponent.
crop_active · yes_noValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
crop_rect_json · textValor actual de l'element seleccionat. Llegeix-lo després de l'esdeveniment relacionat.
Esdeveniments
source_loadedQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
source_load_failedQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
edit_appliedQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
edit_undoneQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
edit_redoneQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
editor_resetQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
export_startedQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
export_completedQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
operation_cancelledQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
editor_errorQuan es produeixi aquest esdeveniment, llegiu els estats relacionats del mateix element.
Preguntes que fan els desenvolupadors
És output_uri un fitxer Bubble?
No. És una ruta de memòria cau local. Manteniu-la mitjançant un guardador o carregador local provat abans d'emmagatzemar una referència d'arxiu al núvol.
Com funciona la subscripció?
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.
Guies relacionades
Per obtenir ajuda, indiqueu quin connector i dispositiu utilitzeu, l'acció que heu provat i què ha passat. Utilitzeu un exemple sense dades personals. No compartiu mai la vostra clau ni fitxers privats.