Xodera Plugins · Bubble Native
Xodera Photo Editor Native
Convierta una foto seleccionada en un avatar, imagen de producto o adjunto de informe coherente. Recorte, rote y cambie su tamaño, luego guarde la copia exportada en su 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 noviembre 2026
Ejemplos prácticos
Avatares de perfil consistentes antes de cargar
Los usuarios deben elegir qué parte de su foto aparece en una imagen de perfil cuadrada 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 o Undo según sea necesario. Al guardar explícitamente, Export image.
Solo en `export_completed`, use `output_uri`, `output_width`, `output_height` y `output_mime` como entradas para su flujo de trabajo de carga de archivos. Guarde su referencia duradera en el Perfil después.
Si el usuario cancela o `editor_error` se dispara, conserve el avatar anterior. Borre la sesión al cambiar de cuenta para que otro usuario no pueda ver el borrador.
La edición crea una copia local. Su aplicación decide cómo guardarla o cargarla.
Prepare fotos consistentes para el mercado o catálogo
Un encuadre diferente y imágenes sobredimensionadas hacen que el catálogo sea irregular y aumentan el tamaño de la carga.
`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` y `export_quality` provienen de su política de carga.
Recorte el área relevante, opcionalmente Resize, luego Export image después de que el usuario confirme. Mantenga el archivo/referencia original por separado.
Verifique `output_width`, `output_height`, `output_bytes` y `output_mime` antes de que su flujo de trabajo de carga guarde el resultado. Almacene la referencia de la imagen resultante en el Ítem.
Si la exportación falla o el resultado viola su política de carga, muestre `error_code` y permita que el usuario lo revise. No sobrescriba la imagen anterior del Ítem antes de la confirmación de carga.
La edición crea una copia local. Su aplicación decide cómo guardarla o cargarla.
Cree una copia de imagen enfocada para un informe de campo
Un técnico puede necesitar un primer plano de una pieza dañada mientras preserva la imagen original del informe.
`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; la proporción de recorte puede permanecer sin restricciones.
Begin crop → Apply crop, luego use Undo/Redo para comparar ediciones. Export image crea la copia editada; su aplicación pregunta si se debe adjuntar esa copia al Informe.
Use `has_changes`, `can_undo`, `can_redo` y `output_uri`. Guarde las referencias originales y editadas en campos separados de la aplicación después de una carga exitosa.
Cancel crop o Reset edits restauran la ruta de edición; la cancelación debe dejar el archivo adjunto del Informe original sin cambios.
La edición crea una copia local. Su aplicación decide cómo guardarla o cargarla.
Lo que funciona ahora
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 flujo de trabajo
Utiliza las acciones beta disponibles a continuación y prueba el resultado en tus dispositivos objetivo.
Estos ejemplos usan registros de aplicación como Lesson, Message y Order. Reemplácelos con sus propios tipos de datos y nombres de elementos. Las direcciones de medios de ejemplo deben ser sustituidas por sus propios archivos.
Establezca source_url en la imagen elegida. Utilice document_context para identificar la cuenta y el registro que se está editando, de modo que al cambiar el registro se elimine la foto anterior.
Después de source_loaded, ejecute Begin crop. Elija 1:1 para un avatar, ajuste el recorte y use Apply crop. Cancel crop deja la imagen sin cambios.
Use Rotate, Flip o Resize si es necesario. Undo y Redo navegan por ediciones completadas; Reset edits restaura la imagen original.
Ejecute Export image. En export_completed, lea output_uri, output_width, output_height y output_mime. Guarde o cargue esa copia usando su flujo de trabajo de guardado de archivos, luego almacene el archivo guardado en el registro.
Configura una vez
La activación de clave está prevista para este complemento. Cree o elija su proyecto de aplicación Bubble en BestPlugins → Dashboard → Plugins. Elija Xodera Photo Editor Native, copie su clave, luego abra Bubble → Plugins → Xodera Photo Editor Native y péguela en licensing_api_key. Guarde una vez; luego use las acciones a continuación. Cada complemento en cada proyecto tiene su propia clave.
Seleccione o capture la imagen con su aplicación primero. Proporcione al editor la dirección de la imagen legible resultante. Los permisos de cámara y biblioteca de fotos pertenecen al selector que utilice.
Configura una vez
- Crea o elige tu proyecto de aplicación Bubble en BestPlugins → Dashboard → Plugins.
- Elige este complemento y copia su clave de proyecto.
- Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
- Añade el elemento, elige los datos de tu aplicación y construye el flujo de trabajo 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 y suscripció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.
Guarda el resultado en tu aplicación
Guarde la imagen cargada o guardada permanentemente en Profile.image o en su campo de adjunto. output_uri es un archivo temporal en el dispositivo, así que primero guarde ese archivo con el flujo de trabajo que haya elegido. Luego almacene output_width, output_height y output_mime como metadatos. Conserve la imagen original si necesita ambas versiones.
Fallo, cancelación y recuperación
En source_load_failed o editor_error, muestre error_code y ofrezca Load source. Cancel operation deja de aceptar el resultado sin terminar; espere hasta is_busy=no antes de iniciar otra edición. Clear session borra el editor, no una imagen ya guardada en otro lugar.
Capacidades y límites
Exportación JPEG y PNG; calidad 0–1; lado máximo de salida 1–4096 píxeles. Entrada: hasta 15 MiB y 20 megapíxeles. Hasta 20 ediciones completadas. Opciones de recorte: libre, 1:1, 4:3, 3:4 y 16:9. No hay cámara integrada, filtros, superposiciones de texto, corrección de perspectiva, exportación WebP ni carga automática.
Configuraciones, acciones y resultados
Utilice estos nombres en Bubble. Las funciones planificadas están marcadas por separado.
Configuraciones beta disponibles
Configuración del 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_errorAcciones y sus entradas
Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear sessionConfiguración del elemento · 12
source_urltext · Predeterminado: ""- Valor de ejemplo
https://bestplugins.online/native-samples/avatar.jpg - Ejemplo de expresión Bubble
Selected Profile's image_url - Dirección del archivo de audio, video o imagen seleccionado. Usa un tipo de archivo que este complemento admita.
document_contexttext · Predeterminado: ""- Valor de ejemplo
<current-user-id> - Ejemplo de expresión Bubble
Current User's unique id - Valor estable para esta cuenta o registro. Use el mismo valor al restaurar sus archivos o borradores guardados.
is_activeyes_no · Predeterminado: true- Valor de ejemplo
yes - Ejemplo de expresión Bubble
GuideHost's view_is_active (your yes/no custom state) - Establece sí mientras esta vista está abierta. Establece no al salir, para que la reproducción o el trabajo actual puedan detenerse.
disabledyes_no · Predeterminado: false- Valor de ejemplo
no - Ejemplo de expresión Bubble
GuideHost's is_busy (your yes/no custom state) - Desactiva el elemento mientras tu aplicación está ocupada o esta acción no está disponible.
show_controlsyes_no · Predeterminado: true- Valor de ejemplo
yes - Ejemplo de expresión Bubble
App Settings' show_editor_controls - Mostrar u ocultar los controles integrados.
crop_aspecttext · Predeterminado: "free"- Valor de ejemplo
1:1 - Ejemplo de expresión Bubble
Avatar Settings' crop_ratio - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
export_formattext · Predeterminado: "jpeg"- Valor de ejemplo
jpeg - Ejemplo de expresión Bubble
Format Dropdown's value - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
export_qualitynumber · Predeterminado: 0.85- Valor de ejemplo
0.85 - Ejemplo de expresión Bubble
Image Settings' quality - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
export_max_dimensionnumber · Predeterminado: 2048- Valor de ejemplo
2048 - Ejemplo de expresión Bubble
Image Settings' max_side - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
allow_upscaleyes_no · Predeterminado: false- Valor de ejemplo
no - Ejemplo de expresión Bubble
Allow upscale Checkbox is checked - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
ui_text_jsontext · Predeterminado: ""- Valor de ejemplo
{} - Ejemplo de expresión Bubble
App Settings' player_labels_json (supported keys only) - JSON opcional con etiquetas de botón compatibles. Déjalo vacío para usar el texto incorporado.
languagetext · Predeterminado: "auto"- Valor de ejemplo
uk - Ejemplo de expresión Bubble
Current User's preferred_language - Configurar language=auto para seguir un dispositivo o idioma de navegador compatible. Introduzca un código de idioma compatible para seleccionarlo explícitamente.
Acciones y sus entradas · 13
Load source
Sin parámetros de acción
Begin crop
Sin parámetros de acción
Apply crop
origin_xnumber · Predeterminado: —- Valor de ejemplo
0 - Ejemplo de expresión Bubble
Crop Settings' x (or omit all rectangle inputs) - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
origin_ynumber · Predeterminado: —- Valor de ejemplo
0 - Ejemplo de expresión Bubble
Crop Settings' y (or omit all rectangle inputs) - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
widthnumber · Predeterminado: —- Valor de ejemplo
512 - Ejemplo de expresión Bubble
Resize Width Input's value:converted to number - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
heightnumber · Predeterminado: —- Valor de ejemplo
512 - Ejemplo de expresión Bubble
Resize Height Input's value:converted to number - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
Cancel crop
Sin parámetros de acción
Rotate
degreesnumber · Predeterminado: —- Valor de ejemplo
90 - Ejemplo de expresión Bubble
Rotation Dropdown's value - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
Flip
axistext · Predeterminado: —- Valor de ejemplo
horizontal - Ejemplo de expresión Bubble
Flip Direction Dropdown's value - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
Resize
widthnumber · Predeterminado: —- Valor de ejemplo
512 - Ejemplo de expresión Bubble
Resize Width Input's value:converted to number - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
heightnumber · Predeterminado: —- Valor de ejemplo
512 - Ejemplo de expresión Bubble
Resize Height Input's value:converted to number - Utilice el valor del registro comercial actual; validarlo contra los límites a continuación.
Undo
Sin parámetros de acción
Redo
Sin parámetros de acción
Reset edits
Sin parámetros de acción
Export image
Sin parámetros de acción
Cancel operation
Sin parámetros de acción
Clear session
Sin parámetros de acción
Estados y eventos
Estados
editor_status · textResultado actual de esta acción. Usa el evento de finalización correspondiente antes de guardar el éxito.
is_busy · yes_noEl trabajo sigue en progreso. Espere antes de iniciar otra acción.
has_image · yes_noValor actual del elemento seleccionado. Léelo después del evento relacionado.
has_changes · yes_noValor actual del elemento seleccionado. Léelo después del evento relacionado.
can_undo · yes_noValor actual del elemento seleccionado. Léelo después del evento relacionado.
can_redo · yes_noValor actual del elemento seleccionado. Léelo después del evento relacionado.
image_width · numberValor actual del elemento seleccionado. Léelo después del evento relacionado.
image_height · numberValor actual del elemento seleccionado. Léelo después del evento relacionado.
output_uri · textUbicación del archivo en este dispositivo. Guarde o cargue el archivo por separado si debe mantenerse en línea.
output_width · numberValor actual del elemento seleccionado. Léelo después del evento relacionado.
output_height · numberValor actual del elemento seleccionado. Léelo después del evento relacionado.
output_bytes · numberValor actual del elemento seleccionado. Léelo después del evento relacionado.
output_mime · textValor actual del elemento seleccionado. Léelo después del evento relacionado.
error_code · textInformación de error de la última acción. Muestra un mensaje útil y ofrece el reintento correspondiente.
crop_active · yes_noValor actual del elemento seleccionado. Léelo después del evento relacionado.
crop_rect_json · textValor actual del elemento seleccionado. Léelo después del evento relacionado.
Eventos
source_loadedCuando ocurra este evento, lea los estados relacionados del mismo elemento.
source_load_failedCuando ocurra este evento, lea los estados relacionados del mismo elemento.
edit_appliedCuando ocurra este evento, lea los estados relacionados del mismo elemento.
edit_undoneCuando ocurra este evento, lea los estados relacionados del mismo elemento.
edit_redoneCuando ocurra este evento, lea los estados relacionados del mismo elemento.
editor_resetCuando ocurra este evento, lea los estados relacionados del mismo elemento.
export_startedCuando ocurra este evento, lea los estados relacionados del mismo elemento.
export_completedCuando ocurra este evento, lea los estados relacionados del mismo elemento.
operation_cancelledCuando ocurra este evento, lea los estados relacionados del mismo elemento.
editor_errorCuando ocurra este evento, lea los estados relacionados del mismo elemento.
Preguntas que hacen los desarrolladores
¿Es output_uri un archivo Bubble?
No. Es una ruta de caché local. Manténgala mediante un guardador o cargador local probado antes de almacenar una referencia de archivo en la nube.
¿Cómo funciona la suscripció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 obtener ayuda, indíquenos qué plugin y dispositivo utiliza, la acción que intentó y lo que ocurrió. Use un ejemplo sin datos personales. Nunca comparta su clave ni archivos privados.