Xodera Plugins · Bubble Native
Xodera Photo Editor Native
將選取的照片轉換為一致的頭像、產品圖片或報告附件。裁切、旋轉與調整大小，然後在您的應用程式中儲存匯出的副本。
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.
文件審閱日期：2026年11月6日
實用範例
上傳前保持一致的個人檔案大頭貼
使用者應自行選擇照片的哪個部分顯示於方形個人檔案圖片，而非接受任意裁切。
`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.
等待 `source_loaded`；Begin crop → Apply crop，必要時使用 Rotate 或 Undo。使用者明確點選 Save 時，執行 Export image。
僅在 `export_completed` 時，使用 `output_uri`、`output_width`、`output_height` 與 `output_mime` 作為檔案上傳流程的輸入。之後將其永久參考儲存至個人檔案。
如果使用者取消或 `editor_error` 觸發，保留舊的大頭貼。帳號變更時清除會話，以防其他使用者看到草稿。
編輯會產生本機副本。您的應用程式自行決定如何保存或上傳。
準備一致的市集或目錄照片
不同的構圖與過大的影像會使目錄不均衡，且增加上傳檔案大小。
`source_url = selected item photo`；`crop_aspect = the app’s chosen ratio`；`export_max_dimension`、`export_format` 與 `export_quality` 皆來自您的上傳政策。
裁切相關區域，必要時執行 Resize，然後在使用者確認後執行 Export image。將原始檔案/參考獨立保留。
在上傳流程儲存結果之前，檢查 `output_width`、`output_height`、`output_bytes` 與 `output_mime`。將產生的影像參考儲存於項目上。
如果匯出失敗或結果違反您的上傳政策，顯示 `error_code` 並讓使用者修正。上傳確認前請勿覆寫先前的項目影像。
編輯會產生本機副本。您的應用程式自行決定如何保存或上傳。
為現場報告建立聚焦影像副本
技術人員可能需要受損部位的特寫，同時保留原始報告影像。
`source_url = Current Report Photo’s source`；`document_context = the report/account reference`；裁切比例可保持不受限制。
Begin crop → Apply crop，然後使用 Undo/Redo 進行編輯比較。Export image 產生編輯後的副本；您的應用程式會詢問是否將該副本附加至報告。
使用 `has_changes`、`can_undo`、`can_redo` 與 `output_uri`。成功上傳後，將原始與編輯後的參考分別儲存在應用程式的不同欄位中。
Cancel crop 或 Reset edits 會還原編輯路徑；取消操作必須保持原始報告附件不變。
編輯會產生本機副本。您的應用程式自行決定如何保存或上傳。
目前可用功能
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.
建立工作流程
使用下方可用的測試版操作，並在目標裝置上測試結果。
這些範例使用如 Lesson、Message 和 Order 的應用程式記錄。請以您自己的資料類型和元素名稱取代它們。範例媒體位址必須替換為您自己的檔案。
將 source_url 設為選取的影像。使用 document_context 以識別正在編輯的帳號與記錄，變更記錄時會清除先前的照片。
在 source_loaded 後，執行 Begin crop。選擇 1:1 作為頭像，調整裁切後使用 Apply crop。Cancel crop 會保持影像不變。
如有需要，使用 Rotate、Flip 或 Resize。Undo 與 Redo 可在已完成的編輯間切換；Reset edits 可還原原始影像。
執行 Export image。於 export_completed 上，讀取 output_uri、output_width、output_height 和 output_mime。使用您選擇的檔案儲存流程保存或上傳該副本，然後將已保存的檔案存入記錄。
一次性設定
此插件計畫支援金鑰啟用。於 BestPlugins → Dashboard → Plugins 中建立或選擇您的 Bubble 應用程式專案。選取 Xodera Photo Editor Native，複製其金鑰，然後開啟 Bubble → Plugins → Xodera Photo Editor Native，將金鑰貼入 licensing_api_key。儲存一次；之後使用以下操作。每個專案中的每個插件都有其專屬金鑰。
先使用您的應用程式選取或拍攝影像。將產生的可讀取影像位址提供給編輯器。相機與相簿權限屬於您使用的選取器。
一次性設定
- 在 BestPlugins → Dashboard → Plugins 中建立或選取您的 Bubble 應用程式專案。
- 選取此外掛並複製其專案金鑰。
- Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
- 加入元件，選取您的應用程式資料，並建立下方的工作流程。
- 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.
安裝與訂閱
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.
將結果儲存至您的應用程式
將上傳或永久儲存的影像保存至 Profile.image 或您的附件欄位。output_uri 為裝置上的暫存檔案，請先以您選擇的工作流程儲存該檔案。然後將 output_width、output_height 與 output_mime 作為中繼資料儲存。如需兩個版本，保留原始影像。
失敗、取消與復原
在 source_load_failed 或 editor_error 上，顯示 error_code 並提供 Load source。Cancel operation 停止接受未完成的結果；在開始另一個編輯前請等候 is_busy=no。Clear session 會清除編輯器，而非已儲存於其他位置的影像。
功能與限制
支援 JPEG 與 PNG 匯出；品質範圍 0–1；最大輸出邊長 1–4096 像素。輸入：最高 15 MiB 與 20 百萬像素。最多 20 個已完成的編輯。裁切選項：自由、1:1、4:3、3:4 與 16:9。無內建相機、濾鏡、文字覆蓋、透視校正、WebP 匯出或自動上傳。
設定、操作與結果
在 Bubble 中使用這些名稱。計畫中的功能會另行標示。
可用的測試版設定
元素設定
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 · text狀態
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 · text事件
source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_error操作及其輸入
Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear session元素設定 · 12
source_urltext · 預設: ""- 範例值
https://bestplugins.online/native-samples/avatar.jpg - 範例 Bubble 表達式
Selected Profile's image_url - 所選音訊、影片或圖片檔案的位址。使用此插件支援的檔案類型。
document_contexttext · 預設: ""- 範例值
<current-user-id> - 範例 Bubble 表達式
Current User's unique id - 此帳戶或記錄的穩定值。還原其已保存的檔案或草稿時使用相同的值。
is_activeyes_no · 預設: true- 範例值
yes - 範例 Bubble 表達式
GuideHost's view_is_active (your yes/no custom state) - 在此視圖開啟時設為是，離開時設為否，以便停止播放或當前工作。
disabledyes_no · 預設: false- 範例值
no - 範例 Bubble 表達式
GuideHost's is_busy (your yes/no custom state) - 當您的應用忙碌或此操作不可用時，停用該元件。
show_controlsyes_no · 預設: true- 範例值
yes - 範例 Bubble 表達式
App Settings' show_editor_controls - 顯示或隱藏內建控制項。
crop_aspecttext · 預設: "free"- 範例值
1:1 - 範例 Bubble 表達式
Avatar Settings' crop_ratio - 使用目前業務記錄的值；依以下限制進行驗證。
export_formattext · 預設: "jpeg"- 範例值
jpeg - 範例 Bubble 表達式
Format Dropdown's value - 使用目前業務記錄的值；依以下限制進行驗證。
export_qualitynumber · 預設: 0.85- 範例值
0.85 - 範例 Bubble 表達式
Image Settings' quality - 使用目前業務記錄的值；依以下限制進行驗證。
export_max_dimensionnumber · 預設: 2048- 範例值
2048 - 範例 Bubble 表達式
Image Settings' max_side - 使用目前業務記錄的值；依以下限制進行驗證。
allow_upscaleyes_no · 預設: false- 範例值
no - 範例 Bubble 表達式
Allow upscale Checkbox is checked - 使用目前業務記錄的值；依以下限制進行驗證。
ui_text_jsontext · 預設: ""- 範例值
{} - 範例 Bubble 表達式
App Settings' player_labels_json (supported keys only) - 可選的 JSON，包含支援的按鈕標籤。留空則使用內建文字。
languagetext · 預設: "auto"- 範例值
uk - 範例 Bubble 表達式
Current User's preferred_language - 設定 language=auto 以跟隨支援的裝置或瀏覽器語言。輸入支援的語言代碼以明確選擇。
操作及其輸入 · 13
Load source
無操作參數
Begin crop
無操作參數
Apply crop
origin_xnumber · 預設: —- 範例值
0 - 範例 Bubble 表達式
Crop Settings' x (or omit all rectangle inputs) - 使用目前業務記錄的值；依以下限制進行驗證。
origin_ynumber · 預設: —- 範例值
0 - 範例 Bubble 表達式
Crop Settings' y (or omit all rectangle inputs) - 使用目前業務記錄的值；依以下限制進行驗證。
widthnumber · 預設: —- 範例值
512 - 範例 Bubble 表達式
Resize Width Input's value:converted to number - 使用目前業務記錄的值；依以下限制進行驗證。
heightnumber · 預設: —- 範例值
512 - 範例 Bubble 表達式
Resize Height Input's value:converted to number - 使用目前業務記錄的值；依以下限制進行驗證。
Cancel crop
無操作參數
Rotate
degreesnumber · 預設: —- 範例值
90 - 範例 Bubble 表達式
Rotation Dropdown's value - 使用目前業務記錄的值；依以下限制進行驗證。
Flip
axistext · 預設: —- 範例值
horizontal - 範例 Bubble 表達式
Flip Direction Dropdown's value - 使用目前業務記錄的值；依以下限制進行驗證。
Resize
widthnumber · 預設: —- 範例值
512 - 範例 Bubble 表達式
Resize Width Input's value:converted to number - 使用目前業務記錄的值；依以下限制進行驗證。
heightnumber · 預設: —- 範例值
512 - 範例 Bubble 表達式
Resize Height Input's value:converted to number - 使用目前業務記錄的值；依以下限制進行驗證。
Undo
無操作參數
Redo
無操作參數
Reset edits
無操作參數
Export image
無操作參數
Cancel operation
無操作參數
Clear session
無操作參數
狀態與事件
狀態
editor_status · text此操作的當前結果。於儲存成功前使用相符的完成事件。
is_busy · yes_no工作仍在進行中。請在開始其他操作前稍候。
has_image · yes_no所選項目的當前值。於相關事件後讀取。
has_changes · yes_no所選項目的當前值。於相關事件後讀取。
can_undo · yes_no所選項目的當前值。於相關事件後讀取。
can_redo · yes_no所選項目的當前值。於相關事件後讀取。
image_width · number所選項目的當前值。於相關事件後讀取。
image_height · number所選項目的當前值。於相關事件後讀取。
output_uri · text此裝置上的檔案位置。若必須保留在線上，請另行保存或上傳檔案。
output_width · number所選項目的當前值。於相關事件後讀取。
output_height · number所選項目的當前值。於相關事件後讀取。
output_bytes · number所選項目的當前值。於相關事件後讀取。
output_mime · text所選項目的當前值。於相關事件後讀取。
error_code · text上一次操作的錯誤資訊。顯示有用的訊息並提供相關的重試。
crop_active · yes_no所選項目的當前值。於相關事件後讀取。
crop_rect_json · text所選項目的當前值。於相關事件後讀取。
事件
source_loaded當此事件發生時，從同一元素讀取相關狀態。
source_load_failed當此事件發生時，從同一元素讀取相關狀態。
edit_applied當此事件發生時，從同一元素讀取相關狀態。
edit_undone當此事件發生時，從同一元素讀取相關狀態。
edit_redone當此事件發生時，從同一元素讀取相關狀態。
editor_reset當此事件發生時，從同一元素讀取相關狀態。
export_started當此事件發生時，從同一元素讀取相關狀態。
export_completed當此事件發生時，從同一元素讀取相關狀態。
operation_cancelled當此事件發生時，從同一元素讀取相關狀態。
editor_error當此事件發生時，從同一元素讀取相關狀態。
開發者常問問題
output_uri 是 Bubble 檔案嗎？
不是。它是本機快取路徑。請透過已驗證的本機儲存或上傳工具持久化，然後再儲存雲端檔案參考。
訂閱如何運作？
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.
相關指南
如需協助，請告訴我們您使用的插件與裝置、嘗試的操作以及發生的情況。請使用不含個人資料的範例。切勿分享您的金鑰或私人檔案。