Giao diện Photo Editor gốc trước đây. Việc chỉnh sửa và xuất trong bản beta hiện tại vẫn đang được thử nghiệm.

Xodera Plugins · Bubble Native

Xodera Photo Editor Native

Chuyển đổi ảnh đã chọn thành avatar, hình ảnh sản phẩm hoặc tệp đính kèm báo cáo nhất quán. Cắt, xoay và thay đổi kích thước, sau đó lưu bản sao đã xuất trong ứng dụng của bạ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.

Xây dựng quy trình làm việc ↓Cài đặt plugin ↗Native Lab

Tài liệu được rà soát ngày 6 tháng mười một năm 2026

Ví dụ thực tế

Ảnh đại diện hồ sơ nhất quán trước khi tải lên

Người dùng nên chọn phần nào của ảnh của họ sẽ hiển thị trong hình ảnh hồ sơ vuông thay vì chấp nhận việc cắt ngẫu nhiên.

`source_url = selected profile image`; `crop_aspect = "1:1"`; `document_context = the account’s stable reference`.

Chờ `source_loaded`; Begin crop → Apply crop, với Rotate hoặc Undo nếu cần. Khi người dùng chủ động chọn Save, chạy Export image.

Chỉ trên `export_completed`, sử dụng `output_uri`, `output_width`, `output_height` và `output_mime` làm đầu vào cho quy trình tải lên tệp của bạn. Sau đó lưu tham chiếu bền vững của nó vào Hồ sơ.

Nếu người dùng hủy hoặc `editor_error` xảy ra, giữ avatar cũ. Xóa phiên khi đổi tài khoản để người dùng khác không thể xem bản nháp.

Chỉnh sửa tạo một bản sao cục bộ. Ứng dụng của bạn quyết định cách lưu hoặc tải lên nó.

Chuẩn bị ảnh thị trường hoặc catalogue nhất quán

Khung hình khác nhau và hình ảnh quá lớn làm cho catalogue không đồng đều và tăng kích thước tải lên.

`source_url = selected item photo`; `crop_aspect = the app’s chosen ratio`; `export_max_dimension`, `export_format` và `export_quality` đến từ chính sách tải lên của bạn.

Cắt vùng liên quan, tùy chọn Resize, sau đó Export image sau khi người dùng xác nhận. Giữ tệp/tham chiếu gốc riêng biệt.

Kiểm tra `output_width`, `output_height`, `output_bytes` và `output_mime` trước khi quy trình tải lên của bạn lưu kết quả. Lưu tham chiếu hình ảnh kết quả vào mục Item.

Nếu xuất thất bại hoặc kết quả vi phạm chính sách tải lên của bạn, hiển thị `error_code` và cho phép người dùng chỉnh sửa lại. Không ghi đè hình ảnh Item trước đó trước khi xác nhận tải lên.

Chỉnh sửa tạo một bản sao cục bộ. Ứng dụng của bạn quyết định cách lưu hoặc tải lên nó.

Tạo bản sao hình ảnh tập trung cho báo cáo hiện trường

Kỹ thuật viên có thể cần cận cảnh một bộ phận bị hỏng trong khi vẫn giữ nguyên hình ảnh báo cáo gốc.

`source_url = Current Report Photo’s source`; `document_context = the report/account reference`; tỷ lệ cắt có thể không bị ràng buộc.

Begin crop → Apply crop, sau đó sử dụng Undo/Redo để so sánh các chỉnh sửa. Export image tạo bản sao đã chỉnh sửa; ứng dụng của bạn hỏi có nên đính kèm bản sao đó vào Báo cáo không.

Sử dụng `has_changes`, `can_undo`, `can_redo` và `output_uri`. Lưu các tham chiếu gốc và đã chỉnh sửa vào các trường riêng biệt của ứng dụng sau khi tải lên thành công.

Cancel crop hoặc Reset edits khôi phục đường dẫn chỉnh sửa; việc hủy bỏ phải để nguyên tệp đính kèm Báo cáo gốc không thay đổi.

Chỉnh sửa tạo một bản sao cục bộ. Ứng dụng của bạn quyết định cách lưu hoặc tải lên nó.

Những gì hiện đang hoạt động

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.

Xây dựng quy trình làm việc

Sử dụng các hành động beta có sẵn bên dưới và kiểm tra kết quả trên thiết bị mục tiêu của bạn.

Các ví dụ này sử dụng các bản ghi ứng dụng như Lesson, Message và Order. Hãy thay thế chúng bằng các kiểu dữ liệu và tên phần tử của bạn. Các địa chỉ phương tiện mẫu phải được thay thế bằng các tệp của bạn.

Đặt source_url thành ảnh đã chọn. Sử dụng document_context để xác định tài khoản và bản ghi đang được chỉnh sửa, vì vậy việc thay đổi bản ghi sẽ xóa ảnh trước đó.
Sau source_loaded, chạy Begin crop. Chọn 1:1 cho ảnh đại diện, điều chỉnh cắt và sử dụng Apply crop. Cancel crop giữ nguyên ảnh.
Sử dụng Rotate, Flip hoặc Resize nếu cần. Undo và Redo di chuyển qua các chỉnh sửa đã hoàn thành; Reset edits khôi phục ảnh gốc.
Chạy Export image. Khi export_completed, đọc output_uri, output_width, output_height và output_mime. Lưu hoặc tải lên bản sao đó bằng quy trình lưu tệp bạn chọn, sau đó lưu tệp đã lưu vào bản ghi.

Sơ đồ quy trình làm việc — không phải ảnh chụp màn hình ứng dụng

Cấu hình một lần

Kích hoạt khóa đang được lên kế hoạch cho plugin này. Tạo hoặc chọn dự án ứng dụng Bubble của bạn trong BestPlugins → Dashboard → Plugins. Chọn Xodera Photo Editor Native, sao chép khóa của nó, sau đó mở Bubble → Plugins → Xodera Photo Editor Native và dán vào licensing_api_key. Lưu một lần; sau đó sử dụng các hành động bên dưới. Mỗi plugin trong mỗi dự án có khóa riêng của nó.

Đầu tiên, chọn hoặc chụp ảnh bằng ứng dụng của bạn. Cung cấp cho trình chỉnh sửa địa chỉ ảnh có thể đọc được. Quyền truy cập camera và thư viện ảnh thuộc về bộ chọn bạn sử dụng.

Cấu hình một lần

Tạo hoặc chọn dự án ứng dụng Bubble của bạn tại BestPlugins → Dashboard → Plugins.
Chọn plugin này và sao chép khóa dự án của nó.
Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
Thêm phần tử, chọn dữ liệu ứng dụng của bạn và xây dựng quy trình làm việc bên dưới.
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.

Cài đặt và đăng ký

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.

Lưu kết quả vào ứng dụng của bạn

Lưu ảnh đã tải lên hoặc đã lưu vĩnh viễn vào Profile.image hoặc trường đính kèm của bạn. output_uri là tệp tạm trên thiết bị, vì vậy trước tiên lưu tệp đó bằng quy trình bạn chọn. Sau đó lưu output_width, output_height và output_mime dưới dạng siêu dữ liệu. Giữ lại ảnh gốc nếu bạn cần cả hai phiên bản.

Lỗi, hủy và khôi phục

Trên source_load_failed hoặc editor_error, hiển thị error_code và đề xuất Load source. Cancel operation ngừng chấp nhận kết quả chưa hoàn thành; chờ đến is_busy=no trước khi bắt đầu chỉnh sửa khác. Clear session xóa trình chỉnh sửa, không phải ảnh đã được lưu ở nơi khác.

Khả năng và giới hạn

JPEG và PNG xuất; chất lượng 0–1; độ dài cạnh đầu ra tối đa 1–4096 pixel. Đầu vào: tối đa 15 MiB và 20 megapixel. Tối đa 20 chỉnh sửa đã hoàn thành. Các lựa chọn cắt: tự do, 1:1, 4:3, 3:4 và 16:9. Không có camera tích hợp, bộ lọc, lớp văn bản, chỉnh sửa phối cảnh, xuất WebP hoặc tải lên tự động.

Cài đặt, hành động và kết quả

Sử dụng các tên này trong Bubble. Các tính năng dự kiến được đánh dấu riêng.

Cài đặt beta khả dụng

Cài đặt phần tử

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

Trạng thái

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

Sự kiện

source_loadedsource_load_failededit_appliededit_undoneedit_redoneeditor_resetexport_startedexport_completedoperation_cancellededitor_error

Hành động và đầu vào của chúng

Load sourceBegin cropApply cropCancel cropRotateFlipResizeUndoRedoReset editsExport imageCancel operationClear session

Cài đặt phần tử · 12

source_urltext · Mặc định: "": Giá trị ví dụhttps://bestplugins.online/native-samples/avatar.jpg; Ví dụ biểu thức BubbleSelected Profile's image_url; Địa chỉ của tệp âm thanh, video hoặc hình ảnh đã chọn. Sử dụng loại tệp mà plugin này hỗ trợ.

document_contexttext · Mặc định: "": Giá trị ví dụ<current-user-id>; Ví dụ biểu thức BubbleCurrent User's unique id; Giá trị ổn định cho tài khoản hoặc bản ghi này. Sử dụng cùng giá trị khi khôi phục các tệp hoặc bản nháp đã lưu của nó.

is_activeyes_no · Mặc định: true: Giá trị ví dụyes; Ví dụ biểu thức BubbleGuideHost's view_is_active (your yes/no custom state); Đặt yes khi chế độ xem này đang mở. Đặt no khi rời khỏi, để có thể dừng việc phát hoặc công việc hiện tại.

disabledyes_no · Mặc định: false: Giá trị ví dụno; Ví dụ biểu thức BubbleGuideHost's is_busy (your yes/no custom state); Vô hiệu hoá phần tử khi ứng dụng của bạn đang bận hoặc hành động này không khả dụng.

show_controlsyes_no · Mặc định: true: Giá trị ví dụyes; Ví dụ biểu thức BubbleApp Settings' show_editor_controls; Hiển thị hoặc ẩn các điều khiển tích hợp.

crop_aspecttext · Mặc định: "free": Giá trị ví dụ1:1; Ví dụ biểu thức BubbleAvatar Settings' crop_ratio; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

export_formattext · Mặc định: "jpeg": Giá trị ví dụjpeg; Ví dụ biểu thức BubbleFormat Dropdown's value; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

export_qualitynumber · Mặc định: 0.85: Giá trị ví dụ0.85; Ví dụ biểu thức BubbleImage Settings' quality; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

export_max_dimensionnumber · Mặc định: 2048: Giá trị ví dụ2048; Ví dụ biểu thức BubbleImage Settings' max_side; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

allow_upscaleyes_no · Mặc định: false: Giá trị ví dụno; Ví dụ biểu thức BubbleAllow upscale Checkbox is checked; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

ui_text_jsontext · Mặc định: "": Giá trị ví dụ{}; Ví dụ biểu thức BubbleApp Settings' player_labels_json (supported keys only); JSON tùy chọn với các nhãn nút được hỗ trợ. Để trống để sử dụng văn bản tích hợp.

languagetext · Mặc định: "auto": Giá trị ví dụuk; Ví dụ biểu thức BubbleCurrent User's preferred_language; Đặt language=auto để theo dõi ngôn ngữ thiết bị hoặc trình duyệt được hỗ trợ. Nhập mã ngôn ngữ hỗ trợ để chọn một cách rõ ràng.

Hành động và đầu vào của chúng · 13

Load source

Không có tham số hành động

Begin crop

Không có tham số hành động

Apply crop

origin_xnumber · Mặc định: —: Giá trị ví dụ0; Ví dụ biểu thức BubbleCrop Settings' x (or omit all rectangle inputs); Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

origin_ynumber · Mặc định: —: Giá trị ví dụ0; Ví dụ biểu thức BubbleCrop Settings' y (or omit all rectangle inputs); Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

widthnumber · Mặc định: —: Giá trị ví dụ512; Ví dụ biểu thức BubbleResize Width Input's value:converted to number; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

heightnumber · Mặc định: —: Giá trị ví dụ512; Ví dụ biểu thức BubbleResize Height Input's value:converted to number; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

Cancel crop

Không có tham số hành động

Rotate

degreesnumber · Mặc định: —: Giá trị ví dụ90; Ví dụ biểu thức BubbleRotation Dropdown's value; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

Flip

axistext · Mặc định: —: Giá trị ví dụhorizontal; Ví dụ biểu thức BubbleFlip Direction Dropdown's value; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

Resize

widthnumber · Mặc định: —: Giá trị ví dụ512; Ví dụ biểu thức BubbleResize Width Input's value:converted to number; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

heightnumber · Mặc định: —: Giá trị ví dụ512; Ví dụ biểu thức BubbleResize Height Input's value:converted to number; Sử dụng giá trị của bản ghi kinh doanh hiện tại; xác thực nó so với các giới hạn bên dưới.

Undo

Không có tham số hành động

Redo

Không có tham số hành động

Reset edits

Không có tham số hành động

Export image

Không có tham số hành động

Cancel operation

Không có tham số hành động

Clear session

Không có tham số hành động

Trạng thái và sự kiện

Trạng thái

editor_status · text

Kết quả hiện tại của hành động này. Sử dụng sự kiện hoàn thành tương ứng trước khi lưu thành công.

is_busy · yes_no

Công việc vẫn đang tiến hành. Vui lòng chờ trước khi bắt đầu hành động khác.

has_image · yes_no