Xodera Plugins · Bubble Native
Xodera Photo Editor Native
Transforme uma foto selecionada em um avatar consistente, imagem de produto ou anexo de relatório. Recorte, gire e redimensione-a, depois salve a cópia exportada no seu aplicativo.
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.
Documentação revisada 6 novembro 2026
Exemplos práticos
Avatares de perfil consistentes antes do upload
Os usuários devem escolher qual parte da foto aparece na imagem de perfil quadrada em vez de aceitar um recorte arbitrário.
`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.
Aguarde `source_loaded`; Begin crop → Apply crop, com Rotate ou Undo conforme necessário. Ao salvar explicitamente, Export image.
Somente em `export_completed`, use `output_uri`, `output_width`, `output_height` e `output_mime` como entradas para seu fluxo de upload de arquivos. Salve sua referência durável no Perfil posteriormente.
Se o usuário cancelar ou `editor_error` for disparado, mantenha o avatar antigo. Limpe a sessão ao mudar de conta para que outro usuário não veja o rascunho.
A edição cria uma cópia local. Seu aplicativo decide como salvá‑la ou enviá‑la.
Prepare fotos consistentes para marketplace ou catálogo
Molduras diferentes e imagens superdimensionadas tornam o catálogo desigual e aumentam o tamanho do upload.
`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` e `export_quality` provêm da sua política de upload.
Corte a área relevante, opcionalmente Resize, então Export image após a confirmação do usuário. Mantenha o arquivo/referência original separadamente.
Verifique `output_width`, `output_height`, `output_bytes` e `output_mime` antes que seu fluxo de upload salve o resultado. Armazene a referência da imagem resultante no Item.
Se a exportação falhar ou o resultado violar sua política de upload, mostre `error_code` e permita que o usuário o revise. Não sobrescreva a imagem anterior do Item antes da confirmação do upload.
A edição cria uma cópia local. Seu aplicativo decide como salvá‑la ou enviá‑la.
Crie uma cópia de imagem focada para um relatório de campo
Um técnico pode precisar de um close‑up de uma parte danificada preservando a imagem original do relatório.
`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; a proporção de recorte pode permanecer sem restrições.
Begin crop → Apply crop, então use Undo/Redo para comparar edições. Export image cria a cópia editada; seu aplicativo pergunta se deve anexar essa cópia ao Relatório.
Use `has_changes`, `can_undo`, `can_redo` e `output_uri`. Armazene as referências original e editada em campos separados do aplicativo após um upload bem‑sucedido.
Cancel crop ou Reset edits restaura o caminho de edição; o cancelamento deve deixar o anexo original do Relatório inalterado.
A edição cria uma cópia local. Seu aplicativo decide como salvá‑la ou enviá‑la.
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.
Crie o fluxo de trabalho
Use as ações beta disponíveis abaixo e teste o resultado em seus dispositivos-alvo.
Estes exemplos utilizam registros de aplicativo como Lesson, Message e Order. Substitua-os pelos seus próprios tipos de dados e nomes de elementos. Endereços de mídia de exemplo devem ser substituídos pelos seus próprios arquivos.
Defina source_url para a imagem escolhida. Use document_context para identificar a conta e o registro sendo editado, de modo que mudar o registro limpe a foto anterior.
Após source_loaded, execute Begin crop. Escolha 1:1 para um avatar, ajuste o recorte e use Apply crop. Cancel crop deixa a imagem inalterada.
Use Rotate, Flip ou Resize se necessário. Undo e Redo percorrem as edições concluídas; Reset edits restaura a imagem original.
Execute Export image. Em export_completed, leia output_uri, output_width, output_height e output_mime. Salve ou envie essa cópia usando o fluxo de trabalho de salvamento de arquivos escolhido, então armazene o arquivo salvo no registro.
Configure uma vez
A ativação de chave está planejada para este plugin. Crie ou escolha seu projeto de aplicativo Bubble em BestPlugins → Dashboard → Plugins. Escolha Xodera Photo Editor Native, copie sua chave, então abra Bubble → Plugins → Xodera Photo Editor Native e cole-a em licensing_api_key. Salve uma vez; depois use as ações abaixo. Cada plugin em cada projeto tem sua própria chave.
Selecione ou capture a imagem com seu aplicativo primeiro. Forneça ao editor o endereço da imagem legível resultante. As permissões de câmera e biblioteca de fotos pertencem ao seletor que você usa.
Configure uma vez
- Crie ou escolha seu projeto de aplicativo Bubble em BestPlugins → Dashboard → Plugins.
- Escolha este plugin e copie sua chave de projeto.
- Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
- Adicione o elemento, escolha os dados do seu aplicativo e construa o fluxo de trabalho abaixo.
- 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.
Instalação e assinatura
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.
Salve o resultado no seu aplicativo
Salve a imagem enviada ou permanentemente salva em Profile.image ou no seu campo de anexo. output_uri é um arquivo temporário no dispositivo, portanto primeiro salve esse arquivo com o fluxo de trabalho escolhido. Em seguida, armazene output_width, output_height e output_mime como metadados. Mantenha a imagem original se precisar de ambas as versões.
Falha, cancelamento e recuperação
Em source_load_failed ou editor_error, mostre error_code e ofereça Load source. Cancel operation deixa de aceitar o resultado incompleto; aguarde até is_busy=no antes de iniciar outra edição. Clear session limpa o editor, não uma imagem já salva em outro lugar.
Capacidades e limites
Exportação JPEG e PNG; qualidade 0–1; lado máximo de saída 1–4096 pixels. Entrada: até 15 MiB e 20 megapixels. Até 20 edições concluídas. Opções de corte: livre, 1:1, 4:3, 3:4 e 16:9. Não há câmera integrada, filtros, sobreposições de texto, correção de perspectiva, exportação WebP ou upload automático.
Configurações, ações e resultados
Use esses nomes em Bubble. Recursos planejados são marcados separadamente.
Configurações beta disponíveis
Configurações 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_errorAções e suas entradas
Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear sessionConfigurações do elemento · 12
source_urltext · Padrão: ""- Valor de exemplo
https://bestplugins.online/native-samples/avatar.jpg - Exemplo de expressão Bubble
Selected Profile's image_url - Endereço do arquivo de áudio, vídeo ou imagem selecionado. Use um tipo de arquivo suportado por este plugin.
document_contexttext · Padrão: ""- Valor de exemplo
<current-user-id> - Exemplo de expressão Bubble
Current User's unique id - Valor estável para esta conta ou registro. Use o mesmo valor ao restaurar seus arquivos ou rascunhos salvos.
is_activeyes_no · Padrão: true- Valor de exemplo
yes - Exemplo de expressão Bubble
GuideHost's view_is_active (your yes/no custom state) - Defina sim enquanto esta visualização estiver aberta. Defina não ao sair, para que a reprodução ou o trabalho atual possam parar.
disabledyes_no · Padrão: false- Valor de exemplo
no - Exemplo de expressão Bubble
GuideHost's is_busy (your yes/no custom state) - Desative o elemento enquanto seu aplicativo estiver ocupado ou esta ação estiver indisponível.
show_controlsyes_no · Padrão: true- Valor de exemplo
yes - Exemplo de expressão Bubble
App Settings' show_editor_controls - Mostrar ou ocultar os controles incorporados.
crop_aspecttext · Padrão: "free"- Valor de exemplo
1:1 - Exemplo de expressão Bubble
Avatar Settings' crop_ratio - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
export_formattext · Padrão: "jpeg"- Valor de exemplo
jpeg - Exemplo de expressão Bubble
Format Dropdown's value - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
export_qualitynumber · Padrão: 0.85- Valor de exemplo
0.85 - Exemplo de expressão Bubble
Image Settings' quality - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
export_max_dimensionnumber · Padrão: 2048- Valor de exemplo
2048 - Exemplo de expressão Bubble
Image Settings' max_side - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
allow_upscaleyes_no · Padrão: false- Valor de exemplo
no - Exemplo de expressão Bubble
Allow upscale Checkbox is checked - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
ui_text_jsontext · Padrão: ""- Valor de exemplo
{} - Exemplo de expressão Bubble
App Settings' player_labels_json (supported keys only) - JSON opcional com rótulos de botão suportados. Deixe vazio para usar o texto incorporado.
languagetext · Padrão: "auto"- Valor de exemplo
uk - Exemplo de expressão Bubble
Current User's preferred_language - Defina language=auto para seguir um idioma de dispositivo ou navegador suportado. Insira um código de idioma suportado para escolhê-lo explicitamente.
Ações e suas entradas · 13
Load source
Sem parâmetros de ação
Begin crop
Sem parâmetros de ação
Apply crop
origin_xnumber · Padrão: —- Valor de exemplo
0 - Exemplo de expressão Bubble
Crop Settings' x (or omit all rectangle inputs) - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
origin_ynumber · Padrão: —- Valor de exemplo
0 - Exemplo de expressão Bubble
Crop Settings' y (or omit all rectangle inputs) - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
widthnumber · Padrão: —- Valor de exemplo
512 - Exemplo de expressão Bubble
Resize Width Input's value:converted to number - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
heightnumber · Padrão: —- Valor de exemplo
512 - Exemplo de expressão Bubble
Resize Height Input's value:converted to number - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
Cancel crop
Sem parâmetros de ação
Rotate
degreesnumber · Padrão: —- Valor de exemplo
90 - Exemplo de expressão Bubble
Rotation Dropdown's value - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
Flip
axistext · Padrão: —- Valor de exemplo
horizontal - Exemplo de expressão Bubble
Flip Direction Dropdown's value - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
Resize
widthnumber · Padrão: —- Valor de exemplo
512 - Exemplo de expressão Bubble
Resize Width Input's value:converted to number - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
heightnumber · Padrão: —- Valor de exemplo
512 - Exemplo de expressão Bubble
Resize Height Input's value:converted to number - Use o valor do registro comercial atual; valide-o contra os limites abaixo.
Undo
Sem parâmetros de ação
Redo
Sem parâmetros de ação
Reset edits
Sem parâmetros de ação
Export image
Sem parâmetros de ação
Cancel operation
Sem parâmetros de ação
Clear session
Sem parâmetros de ação
Estados e eventos
Estados
editor_status · textResultado atual desta ação. Use o evento de conclusão correspondente antes de salvar o sucesso.
is_busy · yes_noO trabalho ainda está em andamento. Aguarde antes de iniciar outra ação.
has_image · yes_noValor atual do item selecionado. Leia-o após o evento relacionado.
has_changes · yes_noValor atual do item selecionado. Leia-o após o evento relacionado.
can_undo · yes_noValor atual do item selecionado. Leia-o após o evento relacionado.
can_redo · yes_noValor atual do item selecionado. Leia-o após o evento relacionado.
image_width · numberValor atual do item selecionado. Leia-o após o evento relacionado.
image_height · numberValor atual do item selecionado. Leia-o após o evento relacionado.
output_uri · textLocalização do arquivo neste dispositivo. Salve ou faça upload do arquivo separadamente se precisar mantê‑lo online.
output_width · numberValor atual do item selecionado. Leia-o após o evento relacionado.
output_height · numberValor atual do item selecionado. Leia-o após o evento relacionado.
output_bytes · numberValor atual do item selecionado. Leia-o após o evento relacionado.
output_mime · textValor atual do item selecionado. Leia-o após o evento relacionado.
error_code · textInformações de erro da última ação. Exiba uma mensagem útil e ofereça a tentativa de novo relevante.
crop_active · yes_noValor atual do item selecionado. Leia-o após o evento relacionado.
crop_rect_json · textValor atual do item selecionado. Leia-o após o evento relacionado.
Eventos
source_loadedQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
source_load_failedQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
edit_appliedQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
edit_undoneQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
edit_redoneQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
editor_resetQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
export_startedQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
export_completedQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
operation_cancelledQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
editor_errorQuando este evento ocorrer, leia os estados relacionados do mesmo elemento.
Perguntas que os desenvolvedores fazem
É output_uri um arquivo Bubble?
Não. É um caminho de cache local. Mantenha‑o através de um salvador ou uploader local comprovado antes de armazenar uma referência de arquivo na nuvem.
Como funciona a assinatura?
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.
Guias relacionados
Para obter ajuda, informe qual plugin e dispositivo você usa, a ação que tentou e o que aconteceu. Use um exemplo sem dados pessoais. Nunca compartilhe sua chave ou arquivos privados.