Xodera Plugins · Bubble Native
Xodera Photo Editor Native
Converta unha foto seleccionada nun avatar, imaxe de produto ou anexo de informe coherente. Recórtea, roteaa e redimensiónaa, despois garde a copia exportada na súa aplicación.
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ón revisada 6 novembro 2026
Exemplos prácticos
Avatares de perfil consistentes antes da carga
Os usuarios deben escoller que parte da súa foto aparece nunha imaxe de perfil cadrada en lugar de aceptar un recorte arbitrario.
`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.
Espere a `source_loaded`; Begin crop → Apply crop, con Rotate ou Undo segundo sexa necesario. Ao gardar explicitamente, Export image.
Só en `export_completed`, use `output_uri`, `output_width`, `output_height` e `output_mime` como entradas ao seu fluxo de carga de ficheiros. Garde a súa referencia duradeira ao Perfil despois.
Se o usuario cancela ou `editor_error` se dispara, manteña o avatar antigo. Limpe a sesión ao cambiar de conta para que outro usuario non poida ver o borrador.
A edición crea unha copia local. A súa aplicación escolle como gardala ou cargala.
Prepare fotos consistentes para o mercado ou catálogo
Enmarcados diferentes e imaxes sobredimensionadas fan que o catálogo sexa irregular e aumentan o tamaño da carga.
`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` e `export_quality` provén da súa política de carga.
Recorte a zona relevante, opcionalmente Resize, despois Export image tras a confirmación do usuario. Manteña o ficheiro/referencia orixinal por separado.
Comprobe `output_width`, `output_height`, `output_bytes` e `output_mime` antes de que o seu fluxo de carga garde o resultado. Almacene a referencia da imaxe resultante no Elemento.
Se a exportación falla ou o resultado viola a súa política de carga, mostre `error_code` e permita que o usuario o corrixa. Non sobrescriba a imaxe anterior do Elemento antes da confirmación da carga.
A edición crea unha copia local. A súa aplicación escolle como gardala ou cargala.
Cree unha copia de imaxe enfocada para un informe de campo
Un técnico pode precisar un plano detalle dunha parte dañada mantendo a imaxe orixinal do informe.
`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; a proporción de recorte pode permanecer sen restricións.
Begin crop → Apply crop, despois use Undo/Redo para comparar as edicións. Export image crea a copia editada; a súa aplicación pregunta se se debe anexar esa copia ao Informe.
Use `has_changes`, `can_undo`, `can_redo` e `output_uri`. Almacene as referencias orixinais e editadas en campos separados da aplicación despois dunha carga exitosa.
Cancel crop ou Reset edits restaura a ruta de edición; a cancelación debe deixar o anexo do Informe orixinal sen cambios.
A edición crea unha copia local. A súa aplicación escolle como gardala ou cargala.
O que funciona agora
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 o fluxo de traballo
Utilice as accións beta dispoñibles a continuación e probe o resultado nos seus dispositivos de destino.
Estes exemplos usan rexistros de aplicación como Lesson, Message e Order. Substitúeaos polos seus propios tipos de datos e nomes de elementos. Os enderezos de medios de exemplo deben substituírse polos seus propios ficheiros.
Defina source_url como a imaxe escollida. Use document_context para identificar a conta e o rexistro que se está editando, de modo que cambiar o rexistro limpe a foto anterior.
Despois de source_loaded, execute Begin crop. Escolla 1:1 para un avatar, axeite o recorte e use Apply crop. Cancel crop deixa a imaxe sen cambios.
Utilice Rotate, Flip ou Resize se é necesario. Undo e Redo navegan polas edicións completadas; Reset edits restaura a imaxe orixinal.
Execute Export image. En export_completed, lea output_uri, output_width, output_height e output_mime. Garde ou cargue esa copia usando o seu fluxo de traballo de gardado de ficheiros escollido, despois almacene o ficheiro gardado no rexistro.
Configura unha vez
A activación da clave está prevista para este complemento. Cree ou escolla o seu proxecto de aplicación Bubble en BestPlugins → Dashboard → Plugins. Escolla Xodera Photo Editor Native, copie a súa clave, despois abra Bubble → Plugins → Xodera Photo Editor Native e péguela en licensing_api_key. Guarde unha vez; a continuación use as accións abaixo. Cada complemento en cada proxecto ten a súa propia clave.
Primeiro seleccione ou capture a imaxe coa súa aplicación. Proporcione ao editor o enderezo da imaxe legible resultante. Os permisos da cámara e da biblioteca de fotos pertencen ao selector que use.
Configura unha vez
- Cree ou escolla o seu proxecto de aplicación Bubble en BestPlugins → Dashboard → Plugins.
- Escolla este complemento e copie a súa clave de proxecto.
- Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
- Engada o elemento, escolla os datos da súa aplicación e constrúa o fluxo de traballo a continuación.
- 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.
Instalación e subscrición
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.
Garde o resultado na súa aplicación
Garde a imaxe cargada ou gardada permanentemente en Profile.image ou no seu campo de anexo. output_uri é un ficheiro temporal no dispositivo, polo que primeiro garde ese ficheiro co fluxo de traballo escollido. Despois almacene output_width, output_height e output_mime como metadatos. Conserve a imaxe orixinal se necesita ambas as versións.
Fallo, cancelación e recuperación
En source_load_failed ou editor_error, mostre error_code e ofreza Load source. Cancel operation deixa de aceptar o resultado incompleto; agarde ata is_busy=no antes de iniciar outra edición. Clear session limpa o editor, non unha imaxe xa gardada noutro lado.
Capacidades e límites
Exportación JPEG e PNG; calidade 0–1; lado máximo de saída 1–4096 píxeles. Entrada: ata 15 MiB e 20 megapíxeles. Ata 20 edicións completadas. Opcións de recorte: libre, 1:1, 4:3, 3:4 e 16:9. Sen cámara integrada, filtros, superposición de texto, corrección de perspectiva, exportación WebP ou carga automática.
Configuracións, accións e resultados
Utilice estes nomes en Bubble. As funcionalidades planificadas están marcadas por separado.
Configuracións beta dispoñibles
Configuración do elemento
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 · textEstados
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 · textEventos
source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_errorAccións e as súas entradas
Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear sessionConfiguración do elemento · 12
source_urltext · Predeterminado: ""- Valor de exemplo
https://bestplugins.online/native-samples/avatar.jpg - Exemplo de expresión Bubble
Selected Profile's image_url - Enderezo do ficheiro de audio, vídeo ou imaxe seleccionado. Usa un tipo de ficheiro que este complemento admita.
document_contexttext · Predeterminado: ""- Valor de exemplo
<current-user-id> - Exemplo de expresión Bubble
Current User's unique id - Valor estable para esta conta ou rexistro. Use o mesmo valor ao restaurar os seus ficheiros ou borradores gardados.
is_activeyes_no · Predeterminado: true- Valor de exemplo
yes - Exemplo de expresión Bubble
GuideHost's view_is_active (your yes/no custom state) - Establece sí mentres esta vista está aberta. Establece non ao saír, para que a reprodución ou o traballo actual poidan detenerse.
disabledyes_no · Predeterminado: false- Valor de exemplo
no - Exemplo de expresión Bubble
GuideHost's is_busy (your yes/no custom state) - Desactiva o elemento mentres a túa aplicación está ocupada ou esta acción non está dispoñible.
show_controlsyes_no · Predeterminado: true- Valor de exemplo
yes - Exemplo de expresión Bubble
App Settings' show_editor_controls - Mostrar ou agochar os controis incorporados.
crop_aspecttext · Predeterminado: "free"- Valor de exemplo
1:1 - Exemplo de expresión Bubble
Avatar Settings' crop_ratio - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
export_formattext · Predeterminado: "jpeg"- Valor de exemplo
jpeg - Exemplo de expresión Bubble
Format Dropdown's value - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
export_qualitynumber · Predeterminado: 0.85- Valor de exemplo
0.85 - Exemplo de expresión Bubble
Image Settings' quality - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
export_max_dimensionnumber · Predeterminado: 2048- Valor de exemplo
2048 - Exemplo de expresión Bubble
Image Settings' max_side - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
allow_upscaleyes_no · Predeterminado: false- Valor de exemplo
no - Exemplo de expresión Bubble
Allow upscale Checkbox is checked - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
ui_text_jsontext · Predeterminado: ""- Valor de exemplo
{} - Exemplo de expresión Bubble
App Settings' player_labels_json (supported keys only) - JSON opcional con etiquetas de botón compatibles. Déixao baleiro para usar o texto incorporado.
languagetext · Predeterminado: "auto"- Valor de exemplo
uk - Exemplo de expresión Bubble
Current User's preferred_language - Establece language=auto para seguir un dispositivo ou idioma de navegador compatible. Introduce un código de idioma compatible para elixilo explicitamente.
Accións e as súas entradas · 13
Load source
Sen parámetros de acción
Begin crop
Sen parámetros de acción
Apply crop
origin_xnumber · Predeterminado: —- Valor de exemplo
0 - Exemplo de expresión Bubble
Crop Settings' x (or omit all rectangle inputs) - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
origin_ynumber · Predeterminado: —- Valor de exemplo
0 - Exemplo de expresión Bubble
Crop Settings' y (or omit all rectangle inputs) - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
widthnumber · Predeterminado: —- Valor de exemplo
512 - Exemplo de expresión Bubble
Resize Width Input's value:converted to number - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
heightnumber · Predeterminado: —- Valor de exemplo
512 - Exemplo de expresión Bubble
Resize Height Input's value:converted to number - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
Cancel crop
Sen parámetros de acción
Rotate
degreesnumber · Predeterminado: —- Valor de exemplo
90 - Exemplo de expresión Bubble
Rotation Dropdown's value - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
Flip
axistext · Predeterminado: —- Valor de exemplo
horizontal - Exemplo de expresión Bubble
Flip Direction Dropdown's value - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
Resize
widthnumber · Predeterminado: —- Valor de exemplo
512 - Exemplo de expresión Bubble
Resize Width Input's value:converted to number - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
heightnumber · Predeterminado: —- Valor de exemplo
512 - Exemplo de expresión Bubble
Resize Height Input's value:converted to number - Utiliza o valor do rexistro empresarial actual; valídalo contra os límites abaixo.
Undo
Sen parámetros de acción
Redo
Sen parámetros de acción
Reset edits
Sen parámetros de acción
Export image
Sen parámetros de acción
Cancel operation
Sen parámetros de acción
Clear session
Sen parámetros de acción
Estados e eventos
Estados
editor_status · textResultado actual desta acción. Usa o evento de finalización coincidente antes de gardar o éxito.
is_busy · yes_noO traballo aínda está en progreso. Agarde antes de iniciar outra acción.
has_image · yes_noValor actual do elemento seleccionado. Léelo despois do evento relacionado.
has_changes · yes_noValor actual do elemento seleccionado. Léelo despois do evento relacionado.
can_undo · yes_noValor actual do elemento seleccionado. Léelo despois do evento relacionado.
can_redo · yes_noValor actual do elemento seleccionado. Léelo despois do evento relacionado.
image_width · numberValor actual do elemento seleccionado. Léelo despois do evento relacionado.
image_height · numberValor actual do elemento seleccionado. Léelo despois do evento relacionado.
output_uri · textLocalización do ficheiro neste dispositivo. Garde ou cargue o ficheiro por separado se debe permanecer en liña.
output_width · numberValor actual do elemento seleccionado. Léelo despois do evento relacionado.
output_height · numberValor actual do elemento seleccionado. Léelo despois do evento relacionado.
output_bytes · numberValor actual do elemento seleccionado. Léelo despois do evento relacionado.
output_mime · textValor actual do elemento seleccionado. Léelo despois do evento relacionado.
error_code · textInformación de erro da última acción. Mostra unha mensaxe útil e ofrece o reintento correspondente.
crop_active · yes_noValor actual do elemento seleccionado. Léelo despois do evento relacionado.
crop_rect_json · textValor actual do elemento seleccionado. Léelo despois do evento relacionado.
Eventos
source_loadedCando ocorra este evento, lea os estados relacionados do mesmo elemento.
source_load_failedCando ocorra este evento, lea os estados relacionados do mesmo elemento.
edit_appliedCando ocorra este evento, lea os estados relacionados do mesmo elemento.
edit_undoneCando ocorra este evento, lea os estados relacionados do mesmo elemento.
edit_redoneCando ocorra este evento, lea os estados relacionados do mesmo elemento.
editor_resetCando ocorra este evento, lea os estados relacionados do mesmo elemento.
export_startedCando ocorra este evento, lea os estados relacionados do mesmo elemento.
export_completedCando ocorra este evento, lea os estados relacionados do mesmo elemento.
operation_cancelledCando ocorra este evento, lea os estados relacionados do mesmo elemento.
editor_errorCando ocorra este evento, lea os estados relacionados do mesmo elemento.
Preguntas que os desenvolvedores fan
É output_uri un ficheiro Bubble?
Non. É unha ruta de caché local. Persistaa mediante un gardador ou cargador local probado antes de almacenar unha referencia a un ficheiro na nube.
Como funciona a subscrición?
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.
Guías relacionadas
Para obter axuda, indícanos que complemento e dispositivo utilizas, a acción que intentaches e o que sucedeu. Usa un exemplo sen datos persoais. Nunca compartas a túa clave ou ficheiros privados.